Узнайте, как создать надежную систему навигации для своего приложения React Native с помощью библиотеки React Navigation.

Мобильные приложения должны иметь систему навигации, которая легко проводит пользователей по различным экранам и функциям.

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

Установка навигационной библиотеки React

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

Чтобы начать использовать React Navigation, установите библиотеку и ее необходимые зависимости:

npm установить @react-navigation/native
npm установить реагирующие-родные-экраны

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

Каждый навигатор в React Navigation находится в отдельной библиотеке. Чтобы использовать любой из навигаторов, вам придется установить их по отдельности.

instagram viewer

Хорошо продуманная структура проекта полезна при создании системы навигации для вашего мобильного приложения. Хорошей практикой является создание источник папку в корневом каталоге вашего проекта. Внутри этой папки у вас должен быть экраны папка. Это поможет отделить компоненты вашего экрана от других компонентов.

Вы будете писать код для настройки шаблона навигации, который вы используете внутри своего проекта. App.js файл.

Создание навигатора внутри App.js file является лучшей практикой по нескольким причинам:

  • App.js обычно является компонентом верхнего уровня в приложении React Native. Определение навигатора в этом файле гарантирует, что иерархия навигации находится на самом высоком уровне дерева компонентов и доступна повсюду.
  • Размещение навигатора в App.js позволяет легко получать доступ и передавать состояние и реквизиты всего приложения на экраны в навигаторе.
  • Реагировать на навигацию НавигационныйКонтейнер обеспечивает необходимый контекст для навигации и обычно располагается внутри App.js. Поместив навигатор в тот же файл, вы сможете легко интегрировать его с НавигационныйКонтейнер.

Навигатор стека

Stack Navigator — самый популярный шаблон навигации в библиотеке React Navigation. Он использует структуру данных стека, где каждый экран является совершенно другим компонентом и располагается поверх предыдущего.

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

Например:

Импортировать Реагировать от«реагировать»;
Импортировать {Контейнер навигации} от'@реагировать-навигация/родной';
Импортировать {создать стекнавигатор} от'@реагировать-навигация/стек';
// Импорт компонентов экрана
Импортировать Домашний экран от'./экраны/Домашний экран';
Импортировать ДеталиЭкран от'./экраны/DetailsScreen';


константа Стек = создатьStackNavigator();


константа Приложение = () => {
возвращаться (


"Дом" компонент = {Домашний экран} />
"Подробности" компонент = {DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
экспортпо умолчанию Приложение;

Приведенный выше блок кода создает компонент Stack Navigator, используя создать стекнавигатор() из навигационной библиотеки.

В этом примере навигатор стека имеет два экрана: Дом и Подробности.

Теперь установите Stack Navigator:

npm установить @react-navigation/стек

Внутри Домашний экран, вы можете использовать навигация объект для проверки навигатора стека:

Импортировать {Таблица стилей, вид, кнопка} от"реагирующий натив";
Импортировать Реагировать от"реагировать";
константа Домашний экран = ({навигация}) => {
возвращаться (

 название ="Перейдите к .."
 onPress={() => navigation.navigate("Подробный экран")}
 />
 </View>
 );
};


экспортпо умолчанию Домашний экран;
константа стили = Таблица стилей.create({});
2 изображения

Обратите внимание, как Stack Navigator автоматически создает кнопку со стрелкой для возврата к предыдущим экранам.

Навигатор вкладок

В некоторых ситуациях наличие системы навигации вперед и назад, такой как Stack Navigator, не дает большого опыта. Для этих случаев лучше подходит Tab Navigator. Он отображает навигационные экраны, доступные пользователю заранее, и может быть проще в использовании. как панель веб-навигации.

Для начала установите @реагировать-навигация/нижние вкладки библиотека с использованием менеджер пакетов NPM.

С создать нижний навигатор (), вы можете создать экземпляр навигатора вкладок, как вы это делали с навигатором стека:

Импортировать { createBottomTabNavigator } от'@react-navigation/нижние вкладки';
константа Tab = createBottomTabNavigator();

А затем определите нужные экраны как вкладки в навигаторе и НавигационныйКонтейнер:

экспортпо умолчаниюфункцияПриложение() {
возвращаться (


 имя="Дом"
 компонент = {Домашний экран}
 варианты={{ заголовок: "Дом" }}
 />
 имя="Профиль"
 компонент = {ProfileScreen}
 варианты={{ заголовок: "Профиль" }}
 />
 имя="Подробности"
 компонент = {DetailScreen}
 варианты={{ заголовок: "Подробности" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

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

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

Вы можете использовать tabBarPosition oвозможность расположить навигатор в вершина, верно, левый, или нижний (по умолчанию).

Ящик Навигатор

Drawer Navigators, или ящики, — это распространенный шаблон навигации в мобильных приложениях. Вы можете открыть ящики, проводя пальцем по экрану или нажимая кнопку. Это заставляет ящик выдвигаться со стороны экрана, открывая его содержимое.

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

Чтобы использовать Drawer Navigator, установите его вместе с реагировать-родной-жест-обработчик и реактивный родной реанимированный:

npm установить @react-navigation/ящик
npm установить реакцию-родной-жест-обработчик

Вам также нужно будет настроить reanimated внутри вашего Babel.config.js файл:

модуль.экспорт = {
 пресеты: ["babel-preset-expo"],
 плагины: ["реагировать-родной-реанимированный/плагин"],
};

Вот пример того, как настроить Drawer Navigator:

Импортировать"реагирующий-родной-жест-обработчик"; // Этот импорт должен быть вверху
Импортировать {Вид, текст, кнопка} от"реагирующий натив";
Импортировать {создатьDrawerNavigator} от"@react-navigation/ящик";
Импортировать {Контейнер навигации} от"@реагировать-навигация/родной";


константа Ящик = создатьDrawerNavigator();


константа ЯщикКонтент = ({навигация}) => {
возвращаться (
сгибаться: 1, alignItems: "центр", JustifyContent: "центр" }}>
размер шрифта: 24, шрифтВес: "смелый" }}>
 Добро пожаловать в ящик
 </Text>

 Это дополнительный контент, который вы можете отобразить в чертежник.
 </Text>


константа Приложение = () => (

 InitialRouteName="Дом"
 drawerContent={(реквизит) => <ЯщикСодержимое {...реквизит} />}
 >
 {/* Другие ваши экраны здесь */}
 </Drawer.Navigator>
 </NavigationContainer>
);
экспортпо умолчанию Приложение;

В этом примере ЯщикСодержимое компонент передается как ящикСодержимое поддерживать создатьDrawerNavigator. Внутри ЯщикСодержимое компонент, вы можете настроить содержимое для отображения нужной информации, используя текстовые компоненты или любые другие элементы и стили.

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

Вы также можете использовать ящик для отображения дополнительного контента, такого как панель поиска, профиль пользователя, контекстная информация или что-либо, что не требует полноэкранного просмотра.

Рассмотрите следующие рекомендации, чтобы получить максимальную отдачу от Drawer Navigator:

  • Не перегружайте ящик слишком большим количеством опций и сосредоточьтесь на представлении наиболее важных и часто используемых функций.
  • Логично и интуитивно классифицируйте связанные элементы, чтобы помочь пользователям быстро найти то, что они ищут.
  • Используйте значки или визуальные индикаторы, чтобы помочь пользователям понять назначение каждого элемента в ящике.

Передача данных с навигационными реквизитами

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

Рассмотрим сценарий, в котором у вас есть список элементов на одном экране, и когда пользователь выбирает элемент, вы хотите передать соответствующие данные на другой экран.

Во-первых, вам нужно определить структуру навигации. Теперь, чтобы передать данные из Домашний экран к ДетальЭкран когда элемент выбран, внутри Домашний экран определите функцию, которая обрабатывает навигацию и включает данные, которые вы хотите передать.

Импортировать Реагировать от«реагировать»;
Импортировать {Вид, текст, кнопка} от«реагирующий нативный»;
константа Домашний экран = ({навигация}) => {
константа обработатьItemPress = (элемент) => {
 навигация.навигация('Подробный экран', { элемент });
 };


возвращаться (

Список из Предметы</Text>
экспортпо умолчанию Домашний экран;

дескрипторItemPress функция использует навигация.навигация метод перехода к ДетальЭкран при передаче данных выбранного элемента в качестве параметра во втором аргументе.

Чтобы иметь доступ к переданным данным внутри ДетальЭкран компонент, вам понадобится навигация опора:

Импортировать Реагировать от«реагировать»;
Импортировать {Вид, текст} от«реагирующий нативный»;
константа Детальный экран = ({навигация}) => {
константа элемент = навигация.getParam('элемент', '');


возвращаться (

Детальный экран</Text>
{элемент}</Text>
 </View>
 );
};
экспортпо умолчанию Детальный экран;

Здесь ДетальЭкран компонент использует навигация.getParam для извлечения переданного элемента из реквизитов навигации. В этом примере по умолчанию устанавливается пустая строка на случай, если данные недоступны. Таким образом, ваше приложение не будет аварийно завершать работу при рендеринге.

В зависимости от сложности вашего приложения, вы можете изучить использование библиотек управления состоянием, таких как Redux или контекстный API для управления и обмена данными по всему миру.

Организация вашего навигационного кода

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

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