React Native навигация

React Navigation

React Navigation поддерживается сообществом React Native и в настоящее время является самой популярной навигационной библиотекой React Native. Он полностью написан на JavaScript и вместо использования нативных API воссоздает некоторые из их подмножеств. Этот выбор был сделан, чтобы позволить пользователям настраивать любую часть навигации без необходимости изучать логику навигации iOS или Android. Поскольку большая часть логики React Navigation выполняется в JavaScript, а не в нативном коде, в игру вступают обычные опасения по поводу блокировки потоков JavaScript. Как указывает сама библиотека , если вам нужно точное поведение платформы, вам лучше использовать другую библиотеку, обертывающую API-интерфейсы платформы.

Когда вы закончите настройку конфигурации (это чисто на основе JS, поэтому нет конкретной конфигурации и привязки платформы), вы узнаете, что все, что вам нужно сделать, это создать, который предоставляет StackNavigator вашему приложению способ перехода между экранами и управляет историей навигации. . Концептуально это похоже на то, как веб-браузер обрабатывает состояние навигации, ключевое отличие заключается в том, что он StackNavigatorпредоставляет жесты и анимацию, аналогичные тем, что используются в Android и iOS.

Вы можете найти простой пример React Navigation на Snack Expo.

React Navigation имеет встроенную поддержку Redux и прямых ссылок, что вместе с хорошо написанной документацией и вибрирующим сообществом делает его разумным выбором для реализации навигации в вашем приложении.

Проблема

Если вы скорее мобильный, чем веб-разработчик, рано или поздно вы будете искать какой-то обратный вызов после или перед выходом из экрана, что-то похожее на viewWillAppear(_:) и другие UIViewController методы. Хотя вы можете использовать onNavigateStateChangeкорневой экран и сравнивать предыдущее и текущее состояние, чтобы определить, какой экран был скрыт, но это не похоже на то, что вы найдете в UIViewController.

React Native Router

React Native Router основан на React Navigation, но предоставляет другой API для взаимодействия с ним. Он позволяет вам определять переходы сцен в одном центральном месте без необходимости передавать объекты навигатора и легко доступен в любом месте кода.

Последняя бета-версия — 4 , среди прочих изменений, представляет поддержку ящиков и конечный автомат навигации на основе Mob-X, который отделяет логику навигации от уровня представления.

React Native Navigation от Wix

Еще одна популярная навигационная библиотека — React Native Navigation, разработанная Wix. Его самым большим преимуществом является 100% нативная навигация по платформе, покрытая кросс-платформенным интерфейсом с готовой поддержкой Redux.

Вам нужно настроить этот пакет отдельно для iOS и Android , который включает в себя связывание библиотек iOS, обновление путей поиска заголовков iOS, расширение SplashActivity вместо ReactActivity Android MainActivity и пару дополнительных шагов, которые подробно описаны в документации. После того, как вы закончите это, вам нужно только зарегистрировать все экраны вашего приложения и запустить приложение. Готово!

В React Native Navigation вы можете использовать API, очень похожий на тот, который вы найдете на нативных платформах (и он вызывает нативный API внизу), поэтому вы можете либо pushсвой экран, либо представить его с помощью showModal, а затем pop или закрыть с помощью dismissModal. Он также имеет встроенную поддержку ящиков меню, глубоких ссылок и световых окон (оповещения).

Чтобы использовать как события навигации по экрану, так и глубокие ссылки, вы должны просто использовать Navigatorобратный вызов s onNavigatorEvent:

onNavigatorEvent(event: NavigatorEvent) {
    if (event.id === 'willAppear') {
        // do some fancy stuff
    } else if (event.type === 'DeepLink') {
        const parts = event.link.split('/')
        if (parts[0] === 'your-deep-link') {
          // navigate
        }
    }
}

v2 - работа в процессе

У React Native Navigation есть несколько проблем , которые не могут быть решены в его текущей архитектуре. Они происходят из-за того, что вы не можете указать, на каком экране вы хотите выполнить действие, которое по умолчанию происходит с вашего текущего экрана. Чтобы решить эту проблему, в v2 каждый экран получает его containerIdв качестве реквизита, и всякий раз, когда вы хотите выполнить действие с этого экрана, вы передаете его функции.

Версия 2 написана на основе разработки через тестирование (TDD), что делает принятие запроса на вытягивание чрезвычайно простым — если тесты пройдены, ваш запрос на вытягивание принят. Вы можете проверить дорожную карту v2 , чтобы следить за ходом разработки.

Альтернативы

Если вы нацелены только на iOS, вы можете рассмотреть возможность использования встроенного NavigatorIOS , который является оболочкой для собственного UINavigationControllerкомпонента. Однако, если вы планируете в будущем ориентироваться на любую другую платформу, вам следует рассмотреть возможность использования любого другого решения с самого начала.

Другой альтернативой является Native Navigation — проект, разработанный Airbnb, одним из самых упоминаемых адаптеров React Native. Нативная навигация в настоящее время находится в состоянии бета-тестирования, и ее авторы не рекомендуют использовать эту библиотеку в производстве до тех пор, пока она не будет выпущена в стабильной версии . Самая большая проблема, стоящая перед Aribnb при отделении этой библиотеки от их внутренней инфраструктуры навигации, заключается в достижении высокого уровня расширяемости, что требует от них большого рефакторинга и тестирования кода. Этот пакет еще не поддерживает глубокие ссылки, а документация неполная, поэтому вам следует рассмотреть возможность использования любой другой библиотеки в серьезном проекте.

Вывод

Мы все же рекомендуем использование 100% нативной навигации платформы в приложениях React Native, поэтому выбор React Native Navigation считаем наиболее ценным, и по-настоящему естественное ощущение при навигации между экранами. Однако, если вы предпочитаете чистую библиотеку JavaScript и не так привязаны к нативной платформе, у вас есть как минимум две альтернативы, которые можно попробовать.

Независимо от того, какой вариант вы выберете, вы должны знать, что это только сторонние библиотеки, и они могут не работать в вашем сценарии или содержать ошибки. Нам пришлось трижды "споткнуться" и изменить React Native Navigation, чтобы избежать некоторых проблем, и хотя они уже были решены в основном репозитории, вы могли столкнуться с чем-то новым.