Навигация со стеком в React Native — пошаговое руководство
Этот материал показывает, как настроить стек-навигацию в приложении React Native: установка библиотек, создание экранов Home и About, передача параметров между экранами и тестирование переходов. Подойдёт для приложений с простым последовательным переходом экранов; в разделе «Альтернативы» описаны другие подходы.
Навигация — ключевая часть мобильного приложения. В React Native чаще всего используют концепцию стека: экраны «накладываются» друг на друга, а возврат происходит путём удаления верхнего экрана. В этом руководстве вы научитесь быстро настроить стек-навигацию с помощью библиотеки React Navigation, создать два экрана (Home и About) и передавать данные между ними.
Что вы получите из этого руководства
- Чёткая пошаговая инструкция по установке @react-navigation и связанных пакетов.
- Полный пример кода для HomeScreen, AboutScreen и App.js.
- Советы по безопасности передачи данных через route.params.
- Альтернативные подходы (табы, drawer, другие библиотеки).
- Контрольный список для разработчика и тестовые сценарии.
Перед началом
Требования на локальной машине:
- Node.js v10 или новее
- Xcode (macOS) или Android Studio (для эмулятора)
- React Native CLI
Если вы ещё не настроили среду, следуйте официальной документации React Native.
Как работает стек-навигация — простая модель
Представьте приложение как стопку тарелок. Сначала на стопке лежит экран Home. При переходе на About мы кладём новый экран сверху. Кнопка «Назад» просто снимает верхний экран и показывает предыдущий. Это поведение очень похоже на кнопку «назад» в браузере.
Важно: стек удобен для последовательных переходов и простых вложенных экранов. Для других сценариев (например, вкладки с независимыми стеками) рассмотрите сочетание навигаторов.
1. Установка React Navigation для нативных приложений
Откройте терминал в корне проекта и выполните команды по очереди.
Установите ядро React Navigation:
npm i @react-navigation/nativeУстановите стек-навигацию (native stack):
npm i @react-navigation/native-stackУстановите react-native-screens (оптимизация представлений экранов):
npm i react-native-screens
После установки проверьте руководство библиотеки: иногда требуется выполнить дополнительные нативные шаги для Android или iOS (linking, pod install и т.д.).
## 2. Создание экранов в приложении
Для примера создадим два экрана: Home и About.
Создайте папку screens в корне проекта и два файла: HomeScreen.js и AboutScreen.js.
### Что добавить в HomeScreen.js
Пример минимального компонента HomeScreen с кнопкой, которая отправляет пользователя на экран About. Мы используем навигационный объект navigation, который автоматически передаётся навигатором.
import * as React from ‘react’; import { Text, View, StyleSheet, Button } from ‘react-native’;
export default function HomeScreen({ navigation }) { return (
Home Screen
); }
const styles = StyleSheet.create({ container: { flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }, paragraph: { fontSize: 18, marginBottom: 16 } });
Если нужно передать данные в About, добавьте объект параметров:
export default function HomeScreen({ navigation }) { const data = { websiteName: “John’s Tech” };
return (
Home Screen
); }
### Что добавить в AboutScreen.js
AboutScreen принимает переданные параметры через route.params и рендерит значение:
import * as React from ‘react’; import { Text, View, StyleSheet } from ‘react-native’;
export default function AboutScreen({ route }) { const dataObj = route.params || {};
return (
This is the About Screen of {dataObj.websiteName || 'unknown'}
); }
const styles = StyleSheet.create({ container: { flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }, paragraph: { fontSize: 18 } });
Если route.params отсутствует (например, прямой переход), мы подстраховываемся и показываем запасное значение.
## 3. Подключение экранов через Stack Navigator
В App.js импортируем экраны и создаём стек. Оборачиваем навигатор в NavigationContainer — это обязательный корневой компонент.
import * as React from ‘react’; import HomeScreen from ‘./screens/HomeScreen’; import AboutScreen from ‘./screens/AboutScreen’; import { NavigationContainer } from ‘@react-navigation/native’; import { createNativeStackNavigator } from ‘@react-navigation/native-stack’;
const Stack = createNativeStackNavigator();
export default function App() { return (
); }
Теперь приложение сначала отрисует HomeScreen. Нажатие на кнопку приведёт к переходу на AboutScreen, и вы увидите переданную websiteName.
Важно: проверяйте, что имена экранов в navigation.navigate(...) совпадают с name у Stack.Screen.
## Практические советы и лучшие практики
- Не передавайте в route.params чувствительные данные (токены, пароли). Используйте безопасное хранилище (SecureStore, Keychain).
- Для больших приложений разделяйте навигацию: один навигатор на уровне приложения, вложенные навигаторы для крупных секций.
- Используйте react-native-screens для оптимизации производительности на iOS и Android.
- Дайте понятные имена экранов: Home, Profile, Settings — без избыточных префиксов.
## Альтернативные подходы
- Вкладки (Bottom Tab Navigator): удобно для основных разделов приложения.
- Drawer (боковое меню): подходит для приложений с множеством независимых разделов.
- Другие библиотеки: React Native Router Flux, Wix Navigation — имеют свои подходы и ограничения.
Выбор зависит от UX и структуры приложения.
## Ментальные модели и эвристики
- Стек = «история навигации», удобен для глубины и возвратов.
- Вкладки = «независимые рабочие области», каждая вкладка может иметь свой стек.
- Drawer = «список разделов», подходит для глобальной навигации.
Если пользователь должен быстро переключаться между разделами — используйте вкладки. Если переходы линейные — стек.
## Контрольный список для внедрения (role-based)
Разработчик:
- Установил @react-navigation/native, native-stack и react-native-screens.
- Создал screens/HomeScreen.js и screens/AboutScreen.js.
- Подключил NavigationContainer и Stack.Navigator.
- Обработал случай отсутствия route.params.
Тестировщик:
- Проверил навигацию вперёд и назад на Android и iOS.
- Проверил передачу параметров через route.params.
- Проверил поведение при повороте экрана и при сворачивании приложения.
Дизайнер:
- Утвердил текст кнопок и заголовков экранов.
- Согласовал поведение «назад» и иерархию экранов.
## Тестовые сценарии и критерии приёмки
Критерии приёмки:
- При старте приложения отображается Home Screen.
- Нажатие на кнопку «Go to About» открывает About Screen.
- Переданный параметр websiteName отображается в About Screen.
- Нажатие аппаратной кнопки назад (Android) возвращает на Home Screen.
Примеры тестов:
- E2E (Detox/Appium): открыть приложение -> нажать кнопку -> проверить текст на About.
- Unit: рендер AboutScreen с пустыми params -> проверить fallback-значение.
## Безопасность и приватность
- Не храните секреты в route.params или в URL-параметрах.
- Для токенов используйте безопасное хранилище (например, react-native-keychain).
- Ограничьте логирование содержимого route.params в продакшене.
## Mиграция и совместимость
- Перед обновлением @react-navigation проверьте официальный changelog.
- Некоторые крупные обновления меняют API навигаторов и конфигурации; тестируйте на отдельной ветке.
- Если вы используете TypeScript, обновите типы и пересоберите проект.
## Когда стек может не подойти
- Если приложение имеет несколько независимых потоков (например, новости + профиль + магазин), возможно лучше комбинировать вкладки и стеки.
- Для сложной модальной логики рассмотрите создание отдельного модального навигатора.
## Мини-методология внедрения (шаги)
1. Установить зависимости и проверить сборку.
2. Добавить базовую структуру screens/.
3. Подключить NavigationContainer и создать Stack.
4. Реализовать передачу параметров и обработку отсутствующих значений.
5. Протестировать на эмуляторах и реальных устройствах.
6. Провести код-ревью и прогон тестов.
## Частые ошибки и способы их исправить
- Ошибка: navigation undefined -> Убедитесь, что компонент вложен в Stack.Screen и обёрнут в NavigationContainer.
- Неправильное имя экрана -> Проверьте соответствие строки в navigate(...) и name в Stack.Screen.
- Пустой route.params -> Добавьте защиту: const params = route.params || {}.
## Краткое резюме
Стек-навигация в React Native — простой и широко используемый способ управлять переходами между экранами. Она хорошо масштабируется для большинства линейных пользовательских потоков. Для сложных приложений комбинируйте стек с вкладками или drawer.
Important: следите за безопасностью передаваемых данных и тестируйте поведение навигации на реальных устройствах.
## Часто задаваемые вопросы
### Как передать данные обратно из About в Home?
Можно использовать navigation.navigate('HomeScreen', { updated: true }) или navigation.goBack() совместно с callback-функцией, переданной через params или с помощью глобального состояния (Redux, Context).
### Можно ли вложить навигаторы (stack внутри tab)?
Да. Частая практика — иметь Bottom Tab Navigator на верхнем уровне, а внутри каждой вкладки — свой Stack Navigator.
### Где хранить токены аутентификации?
Токены храните в безопасном хранилище (Keychain/EncryptedSharedPreferences), а не в route.params.
