Здравствуйте, кажется, я всегда это говорю, но я давно не писал статью, я был занят жизнью и своими личными проектами. Однако сегодня я решил написать статью, описывающую, как создать навигатор нижних вкладок в нативном приложении React с использованием страницы React-Navigation версии 6.0.
Первое, что нам нужно сделать, это создать реагирующее приложение, для этого используйте команду ниже:
npx react-native@latest init BottomTabNavigatorProject
Это может занять несколько минут.
Следующий шаг — установка необходимого пакета React-Navigation, но перед этим я кратко объясню, что такое React-Navigation.
React-Navigation — это фантастический пакет, состоящий из нескольких основных утилит, которые затем используются навигаторами для предоставления вашему приложению структуры навигации. В этом пакете есть несколько вариантов навигации, таких как стек, вкладка и ящик. React-Navigation имеет несколько зависимостей, которые также необходимо установить.
Откройте проект React-Native в редакторе кода, а затем откройте терминал в редакторе кода.
Итак, первый пакет, который нам нужен, — это собственный пакет React-Navigation.
npm install @react-navigation/native
После этого мы установим библиотеки зависимостей.
npm install react-native-screens react-native-safe-area-context
Если вы используете React-Native 0.60 или выше, то связывание библиотек происходит автоматически (автосвязывание — это механизм, который позволяет вашему проекту, ориентированному на реакцию, использовать и обнаруживать код, который может зависеть от платформы).
Если вы используете устройство Mac (я надеюсь, что вы ха-ха) и разрабатываете для iOS, вам также нужно будет установить модули, а затем запустить приведенную ниже команду из корня вашего проекта.
npx pod-install ios
Пользователям Android будет полезно знать, что пакет React-native-screens требует внесения нескольких незначительных изменений для правильной работы на устройствах Android. Объяснение изменений можно найти здесь.
