Использование навигатора стека может помочь вашему приложению переходить с одного экрана на другой с минимумом кода.

Часто при создании приложения React Native вы будете составлять его из разных экранов, таких как «Вход», «Домой» и «О программе». Затем вам нужно будет реализовать механизм навигации, чтобы ваши пользователи могли перемещаться по приложению и получать доступ к его отдельным экранам в правильном порядке.

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

Прежде чем вы начнете

Чтобы следовать этому руководству на локальном компьютере, вам необходимо установить следующее:

  • Node.js v10 или выше
  • Xкод или Android-студия (настроен для запуска эмулятора)
  • Реагировать на собственный интерфейс командной строки

Пошаговые инструкции по настройке среды разработки React Native см. официальный React Native документация по настройке.

instagram viewer

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

Понимание того, как работает навигация по стеку

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

Если бы вам нужно было перейти к О скрин из Дом экран, приложение будет нажимать О в стек, поэтому он находится поверх Дом. Точно так же приложение помещает каждый новый экран, на который вы переходите, в стек.

Теперь, если вы хотите вернуться к предыдущему экрану, приложение извлечет ваш текущий экран из стека и покажет вам тот, который находится под ним. Это поведение похоже на то, что происходит, когда вы нажимаете значок «Назад» в веб-браузере.

Имея четкое представление о механизме навигации по стеку, пришло время настроить его в приложении React Native.

1. Установите React Navigation для нативных приложений

Для начала установите Пакет навигации React для нативных приложений в вашем проекте React Native, выполнив эту команду на терминале:

нпм я @реагировать-навигация/родной

Пакет, который вы только что установили, требует Реагировать на нативный стек и Реагировать на родные экраны правильно бегать. Чтобы установить стек RN, запустите:

нпм я @реагировать-навигация/родной-куча

Чтобы установить второй, запустите это:

npm я реагирую-родной-экраны

Теперь у вас есть все необходимое, чтобы приступить к созданию механизма навигации в вашем приложении. Следующим шагом будет установка экранов.

2. Настройте экран в своем приложении React Native

В этом примере мы создадим всего два экрана — домашний экран и экран сведений.

Создайте папку с именем экраны внутри корневого каталога вашего приложения. После этого создайте два файла с именами HomeScreen.js и AboutScreen.js внутри каталога. экраны.

Что добавить в файл HomeScreen.js

Откройте файл HomeScreen.js и начните с импорта следующего:

Импортировать * как Реагировать от«реагировать»;
Импортировать { Текст, Вид, Таблица стилей, TouchableOpacity } от«реагирующий нативный»;
Импортировать { состояние использования } от«реагировать»

Затем создайте функциональный компонент HomeScreen и получите доступ к объекту навигации, используя деконструкцию объекта (согласно Реагируйте на лучшие практики), затем верните заголовок и кнопку для перехода к экрану «О программе»:

экспортпо умолчаниюфункцияДомашний экран({навигация}) { 
возвращаться ( 
<Видстиль={стили.контейнер}>
<Текстстиль={стили.параграф}> Домашний экран Текст>
 название =«Перейти к информации»
 onPress={() => navigation.navigate(«Об экране»)} 
 /> 
Вид>
 );
}

Здесь мы говорим React Native перейти к О когда пользователь нажимает кнопку. В этом случае мы не передаем никаких данных на экран. Но предположим, что вы хотите передать данные в функцию; вот как вы это сделаете:

экспортпо умолчаниюфункцияДомашний экран({навигация}) { 
константа данные = { веб-сайтНазвание: "Технология Джона" }
возвращаться ( 
<Видстиль={стили.контейнер}>
// Здесь будет текст 
 название =«Перейти к информации»
 onPress={() => navigation.navigate(«Об экране», данные)} 
 /> 
Вид>
 );
}

Теперь при нажатии на кнопку этот код передает данные на следующий экран, О. Внутри ОScreen.js файл, вы можете получить доступ к данным из маршрута и отобразить их в пользовательском интерфейсе.

Что добавить в файл AboutScreen.js

Откройте файл AboutScreen.js и начните с импорта следующих зависимостей:

Импортировать * как Реагировать от«реагировать»;
Импортировать { Текст, Вид, Таблица стилей, Кнопка } от«реагирующий нативный»;

Далее создайте О экране функциональный компонент, который получает данные из route.params свойство и возвращает данные в пользовательском интерфейсе:

экспортпо умолчаниюфункцияО экране({маршрут}) { 
позволять dataObj = маршрут.парамс
возвращаться ( 
<Видстиль={стили.контейнер}>
<Текстстиль={стили.параграф}>
 Этот является экран «О программе» {dataObj.websiteName} 
Текст>
Вид>
 );
}

Если вы помните, мы указали одно свойство в объекте данных с именем веб-сайтНазвание, который мы теперь визуализируем внутри компонент. Вы можете добавить в объект столько свойств, сколько хотите, и получить к ним доступ внутри компонента целевых экранов.

Следующим шагом является настройка нашего навигатора стека с двумя экранами.

3. Соединение экранов с помощью Stack Navigator

Внутри App.js начните с импорта следующих зависимостей:

Импортировать * как Реагировать от«реагировать»;
Импортировать Домашний экран от'./экраны/Домашний экран'
Импортировать О экране от'./экраны/AboutScreen'
Импортировать {Контейнер навигации} от"@реагировать-навигация/родной"
Импортировать {создатьNativeStackNavigator} от"@react-navigation/native-stack"

Во второй и третьей строках мы импортировали два только что созданных экрана. Затем мы импортировали НавигационныйКонтейнер

от @реагировать-навигация/родной и создатьNativeStackNavigator от @реагировать-навигация/родной-стек чтобы помочь нам подключить экраны.

Далее звоните создатьNativeStackNavigator чтобы получить стек:

константа Стек = createNativeStackNavigator()

Это позволяет нам «складывать» экраны, между которыми вы хотите переключаться в вашем приложении.

Создайте функцию компонента приложения и верните оба экрана в как показано ниже. Обязательно заверните его в или не получится:

экспортпо умолчаниюфункцияПриложение() { 
возвращаться ( 
<НавигационныйКонтейнер>
<Куча. Навигатор>
<Куча. Экранимя="Домашний экран"компонент = {Домашний экран} />
<Куча. Экранимя="Об экране"компонент = {Об экране} />
Куча. Навигатор>
НавигационныйКонтейнер>
 );
}

Этот код помещает экран HomeScreen поверх стека, что означает, что приложение сначала отобразит компонент Home, когда завершит загрузку.

Теперь все установлено. Вы можете протестировать приложение, нажав кнопку Перейти к О программе кнопку на домашнем интерфейсе. Это должно перенаправить вас на О, и вы найдете веб-сайтНазвание свойство, отображаемое в пользовательском интерфейсе:

2 изображения

Лучшее в использовании React Navigation for Native — это простота настройки и использования. Он не требует никаких дополнительных настроек (кроме установленных вами необходимых библиотек), а также вы можете подключить различные типы платного доступа (если вы собираетесь создать приложение на основе подписки).

Узнайте больше о React Native

React Native — это кроссплатформенный фреймворк для создания приложений, работающих на устройствах Android и iOS. О React Native можно узнать так много, и если вы новичок в использовании фреймворка, вам следует начать с изучения основ.