Начало работы с новой навигацией на навигацию RACT V5

Автор оригинала: Harris Robin Kalash.

К настоящему времени мы все слышали о Реагистрация навигации V5 Отказ Он поставляется с кучей улучшений и совершенно новым подходом к конфигурации, который на основе компонентных VS на основе API. Вы можете узнать больше об этой новой версии здесь.

React Navigation V5 – это большой выпуск, который полностью изменяется, как настроен ваша навигация. Что говорят, что говорят, что с таким выпуском, модернизацией и пониманием все происходит, может быть сложно. Вот почему котных пластин, как Зажигание Bowser отлично. Если вы начинаете с реагирования на родных сегодня и хотите начать с последней навигационной библиотеки, я настоятельно рекомендую вам попробовать!

Это, как говорят, прежде чем использовать Bowser, вы можете узнать, как мы встроили встроенные навигацию по ractions v5, поэтому сегодня я собираюсь перейти, как мы обновили Bowser, чтобы отреагировать навигацию V5. Надеюсь, к концу этой статьи вы поймете решения, сделанные в нашей котельной, чтобы вы могли уверенно использовать его и вносить изменения в него, чтобы удовлетворить потребности вашего проекта.

Начальная настройка

Если вы хотите, чтобы вы хотели бы следить за этим руководством, я рекомендую вам сначала начать с генерации свежего реагирования нативный проект, используя React-Native CLI. Вставьте следующую команду и следуйте!

npx react-native init rnv5upgrade

После того, как этот скрипт завершится, вы должны увидеть вышеперечисленное.

После завершения, продолжайте и CD в недавно созданный каталог. Если вы запустите YOS IOS, вы сможете увидеть свой свежий реагировать нативный проект, работающий на симуляторе iOS. Мы будем использовать симулятор iOS для демонстрации нашей работы на оставшуюся часть этого руководства, но все должно работать то же самое на Android.

Первый шаг будет установить необходимые пакеты в свой реактивный нативный проект. Первый пакет, который вы захотите установить, IS @ React – Navigation/Nature. Если вы используете пряжу, вы захотите выполнить следующее:

yarn add @react-navigation/native

Лучшее объяснение того, что делает этот пакет из официальной реактивной документации:

Навигация React состоит из некоторых основных утилит, и те, которые затем используются навигаторами для создания структуры навигации в вашем приложении. Не беспокойтесь об этом уже сейчас, это скоро станет ясно! Для FrontLoad Установка Работа, давайте также устанавливаем и настраиваем зависимости, используемые большинством навигаторов, то мы можем двигаться вперед с запуском, чтобы написать какой-то код.

Библиотеки, которые мы будем устанавливать сейчас, являются реагировать нативно-жест-обработчик, реагировать нативно-реанимированные, реагировать-нативные экраны и реагировать и безопасный контекст. Если у вас уже есть эти библиотеки, установленные и на последней версии, вы здесь сделаны! В противном случае читайте дальше.

Поскольку инструкции говорят, нам теперь нужно установить недостающие зависимости для навигации на реактивную навигацию (если вы используете EXPO, обратитесь к Официальной документации на шагах EXPO ).

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Наконец, прежде чем мы доберемся интеграцию навигации на реакцию в нашем проекте, вы захотите импортировать Реагистрационный жест-обработчик В вашем файле входа (обычно index.js).

Настройка навигационной структуры

Теперь вы заметите, что в Bowter мы решили добавить все наши навигаторы в Приложение/навигация Отказ Давайте идти вперед и сделаем это. Создайте папку приложения и папку навигации внутри него. Не стесняйтесь также создать файл index.js внутри папки навигации.

Ваша структура каталогов должна выглядеть так далеко:

В порядке реагирования навигации на работу, нам нужно обернуть все наше приложение в НавигацияКонсервер Отказ Единственное, что вам нужно знать об этом компонент, заключается в том, что он отвечает за управление состоянием приложения и связать навигатор верхнего уровня. Вы можете получить представление о том, что это выглядит как в Bowter здесь (имейте в виду, что это файл шаблона JSX для генератора).

Итак, давайте пойдем вперед и создадим наш корневой навигатор с NavigationContainer. Сначала вы захотите создать файл под названием root-navigator.jsx и вставка в следующий код:

https://gist.github.com/harrisrobin/1a2ee7801d6a63ba1056318e2101ab42

Теперь, когда мы создали Первичный навигатор , мы захочем импортировать его в корневой навигатор И используйте его внутри нашего rootstack. Ваш root-navigator.js теперь должен выглядеть так:

https://gist.github.com/harrisrobin/546787cf27f7726e35b0f5ef3946be80

Давайте очень быстро сменим снаряжение и убрать наш App.js Файл, чтобы получить его для React-навигации!

Самое простое, что нужно сделать здесь – очистить все в своем App.js и заменить его этим:

https://gist.github.com/harrisrobin/1e6df5803cccca39c17326976b47b6d9

Главное посмотреть вот то, что мы используем Реагистрационные экраны Что позволит нам использовать собственную навигацию вместо стека JS, который позволит нам получить выгоду от лучшей производительности и управления памятью. Наконец, мы просто импортируем Какое все это приложение, завернутое в реактивный навигация! Мы почти готовы катиться!

Ваш App.js Файл должен теперь выглядеть как ниже. Кроме того, я рекомендую переместить App.js Файл к каталогу/приложению/приложению лучше соответствовать Bowser Отказ

Прежде чем идти вперед обновить наше приложение, нам нужно на самом деле построить наш первый экран, в противном случае вы просто увидите ошибку. Давайте пойдем вперед и быстро настроить наши Добро пожаловать Отказ Я пошел вперед и построил очень базовый макет приветственного экрана для этого учебника, поэтому не стесняйте копировать его вставить:

https://gist.github.com/harrisrobin/2c66ef7d24b1281e8e2d83f4c079e56e

К настоящему времени, если вы обновите свое приложение, вы должны увидеть это:

Тестирование нашей настройки

Теперь, когда у нас есть наша навигационная настройка, давайте создадим другой экран и проверить нашу настройку! Я собираюсь создать новый экран, который я позвоню Прощай-экран Отказ Вот код для указанного экрана:

https://gist.github.com/harrisrobin/5a9c7f823990dca25b4a5541822b9619

Конечный результат 🎉.

Вы можете найти публичный репозиторий этого приложения здесь Отказ

Заключение

Это очень минимальная установка. В приложении реального мира вы, скорее всего, захотите извлечь выгоду из куча других вещей, таких как Навигация Настойчивость , Tymdercript , Государственное управление , Улучшенная отладка и Тема поддержки Отказ Установка всего этого может занять довольно ненужное время, которое не связано с доставкой вашего приложения, именно поэтому мы работаем на Зажигание Bowser который поставляется со всеми этими вещами из коробки!

Это руководство предназначено для того, чтобы помочь вам понять, как работает навигационная часть Bowser, но если вы начинаете проект сегодня, я настоятельно рекомендую вам проверить Bowser, который поставляется с:

• Реагировать на родной
• Реагировать навигацию
• Mobx State Tree (почему MST?)
• Машинопись
• Reactotron (требует 2.x)
• И больше!

Harris Robin – это разработчик Fullstack, базирующийся в Монреале, Квебеке и соучредителю на дому. Вы можете поддержать его, хлопая, Следуя или по Покупая его кофе Отказ