Настройка Stack-навигации в React Native

В этой статье показано, как настроить стек-навигацию (stack navigation) в React Native шаг за шагом: установка пакетов, создание экранов, передача параметров, подключение навигатора в App.js и отладка типичных ошибок. Приведены рекомендации по архитектуре, чек‑листы для разработчика и тестировщика, а также варианты альтернатив и советы по производительности.

Обычно приложение на React Native строится из нескольких экранов — например, Login, Home и About. Чтобы пользователи могли переходить между этими экранами в нужном порядке, нужно настроить навигацию. В этом руководстве мы пройдём весь поток: от установки библиотек до практических приёмов передачи данных, кастомизации заголовков и отладки.

Зачем именно стек‑навигация?

Коротко: стек‑навигация моделирует поведение стопки страниц. Вы «push»-ите новый экран сверху и «pop»-ите, чтобы вернуться назад. Это естественно для многих мобильных интерфейсов и удобно для последовательных потоков (например, регистрация → подтверждение → профиль).

Ключевые варианты навигации: navigate, push, replace, goBack. Выбор зависит от сценария (навигация по истории, глубокие переходы, замена текущего экрана).

Перед началом

Необходимые инструменты (минимум):

• Node.js v10 или выше
• Xcode или Android Studio с настроенным эмулятором/симулятором
• React Native CLI (если используете bare workflow)

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

Схема работы Stack Navigation — простая аналогия

Представьте стек: сначала на нём лежит Home. Когда вы нажимаете кнопку «Перейти на About», экран About помещается поверх Home. При возврате About исчезает (pop) и под ним снова виден Home. Это то же поведение, что и кнопка «назад» в браузере.

Важно: стек хранит историю переходов в рамках одного навигатора. Для сложных приложений часто используются вложенные навигаторы (stack внутри tab, drawer и т. д.).

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

Откройте терминал и установите базовый пакет:

npm i @react-navigation/native

Затем установите стек‑навигатор и экранные оптимизации:

npm i @react-navigation/native-stack
npm i react-native-screens

Дополнительно, если проект iOS, не забудьте выполнить pod install в ios-папке:

cd ios && pod install && cd ..

Примечание: некоторые версии React Native требуют автолинковки или ручной настройки — смотрите сообщения npm и вывод сборки.

2. Создание экранов (пример: Home и About)

Создайте папку screens в корне проекта и добавьте HomeScreen.js и AboutScreen.js.

HomeScreen.js — минимальный вариант

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    
      Home Screen
       navigation.navigate('AboutScreen')}
      />
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  paragraph: { fontSize: 18 }
});

Если нужно передать данные при переходе:

onPress={() => navigation.navigate('AboutScreen', { websiteName: "John's Tech" })}

AboutScreen.js — чтение параметров из 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 }
});

Обратите внимание на защитный доступ dataObj?.websiteName — пригодится, если параметры не были переданы.

3. Подключение Stack Navigator в App.js

В корневом App.js импортируйте экраны и навигационные компоненты:

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 (
    
      
        
        
      
    
  );
}

Важно: NavigationContainer должен оборачивать навигатор. Без него навигация не будет работать.

Расширенные приёмы и полезные сценарии

a) Разница: navigate vs push vs replace

• navigate(‘Route’) — идем к экрану; если экран уже в стеке, делает переход к нему (в зависимости от конфигурации может переиспользовать существующий экземпляр).
• push(‘Route’) — всегда помещает новый экземпляр экрана в стек.
• replace(‘Route’) — заменяет текущий экран, не создавая историю для возврата.

Выбор: используй push для повторяющихся однотипных экранов (например, детализация элементов), replace для экранов, после которых возврат не нужен (например, экран логина после успешной авторизации).

b) Управление заголовком и опциями экрана

В Stack.Screen можно передать параметр options:

Можно передавать функции options, которые получают { route, navigation } для динамических заголовков.

c) Передача и чтение параметров — рекомендации

• Минимизируйте объём данных, передаваемых через навигацию: передавайте id и загружайте подробные данные локально/по сети.
• Для передачи коллбеков используйте общие состояния (context) или менеджеры состояния (Redux/MobX), а не функции в params — такие функции не сериализуются для deep linking.

d) Deep linking и начальные маршруты (кратко)

React Navigation поддерживает deep linking: при старте приложения NavigationContainer может обработать URL и перейти на соответствующий экран. Для этого настраивают config и linking. Это отдельная тема; запомните: не кладите секреты в URL-параметры.

e) Вложенные навигаторы

Для сложных приложений часто используют сочетание Tab + Stack или Drawer + Stack. Общая практика:

• Каждый таб имеет свой стек экранов
• Stack внутри tab оставляет поведение «назад» независимым для каждого таба

Пример (упрощённо):

Где HomeStack — это компонент, возвращающий Stack.Navigator с экранами.

Частые ошибки и способы их исправления

• Навигация не работает / blank screen: проверьте, обёрнут ли навигатор в NavigationContainer.
• Ошибка native-stack: проверьте, что установлены и линкованы react-native-screens и @react-navigation/native-stack.
• iOS: после установки библиотек выполните pod install.
• route.params undefined: возможно, не передали параметры при navigate; используйте защитные проверки (dataObj?.prop).

Совет для отладки: включите логирование navigation и route в компонентах, чтобы видеть текущие параметры.

Производительность и react-native-screens

react-native-screens переводит экраны в нативные представления, уменьшая расход памяти и повышая производительность при большом количестве экранов. Рекомендуется включить её (обычно подключается автоматически), особенно в сложных приложениях.

Тестирование навигации

• Unit: тестируйте компоненты экранов в изоляции — мокайте navigation и route.
• E2E: используйте Detox или Appium для симуляции переходов и проверки сценариев (например, логин → профиль → выход).

Пример мокирования navigation в Jest:

const navigation = { navigate: jest.fn(), goBack: jest.fn() };
render();
fireEvent.press(getByText('Go to About'));
expect(navigation.navigate).toHaveBeenCalledWith('AboutScreen');

Безопасность и конфиденциальность

Не храните секреты и токены в параметрах навигации. Для чувствительных данных используйте безопасные хранилища (Keychain/EncryptedStorage) или менеджер состояния.

Альтернативные подходы к навигации

• Использовать библиотеку React Navigation (рекомендуется для большинства случаев).
• Для очень простых приложений можно вручную рендерить компоненты по состоянию (управление видимыми экранами через state), но это быстро становится неуправляемым для средних и больших приложений.
• Для специфичных нативных требований — писать собственный мост к нативным контроллерам навигации, но это дорого по поддержке.

Ментальные модели и эвристики

• Модель «стек» — для линейных потоков (шаги формы, пошаговые мастера).
• «Вложенные навигаторы» — для разделов приложения с независимой историей.
• «Replace» — использовать, когда не нужен возврат.
• «Push» — когда нужен новый экземпляр экрана.

Мини‑методология: как добавить новый экран (SOP)

1. Создать файл в /screens с именем NewScreen.js.
2. Экспортировать компонент по умолчанию.
3. Импортировать экран в App.js и добавить в Stack.Navigator.
4. Если экран должен принимать параметры — документировать структуру params.
5. Написать unit‑тесты для ключевой логики.
6. Протестировать поведение на iOS и Android.

Ролевые чек‑листы

Разработчик:

• Установил пакеты и выполнил pod install
• Добавил экран в навигатор
• Обработал route.params безопасно
• Добавил опции header, если требуется

QA:

• Проверил переходы назад/вперёд
• Проверил передачу параметров и их отсутствие
• Тестировал deep link при необходимости

PM/Дизайнер:

• Подтвердил заголовки экранов и порядок навигации
• Согласовал поведение кнопки «назад» и ожидаемое сохранение состояния

Decision tree: выбрать navigate/push/replace

flowchart TD
  A[Начальная точка] --> B{Нужна ли история возврата?}
  B -- Да --> C{Нужен новый экземпляр экрана?}
  B -- Нет --> D[Использовать replace]
  C -- Да --> E[Использовать push]
  C -- Нет --> F[Использовать navigate]

Критерии приёмки

• Экран открывается при нажатии соответствующей кнопки.
• Переданные параметры появляются корректно на целевом экране.
• Кнопка «назад» возвращает пользователя к предыдущему экрану.
• Нет ошибок сборки после установки библиотек и pod install (для iOS).

FAQ

Как передать объекты большого размера через navigation?

Лучше передавать только идентификатор и загружать объёмные данные в целевом экране через API или общий стейт.

Что делать, если route.params undefined?

Проверьте место вызова navigation.navigate — возможно, параметры не передаются. Используйте защитную проверку: const name = route.params?.name.

Нужно ли всегда использовать react-native-screens?

Рекомендуется — он повышает производительность. Но убедитесь в совместимости с вашей версией React Navigation.

Краткое резюме

React Navigation позволяет быстро и гибко организовать навигацию в React Native. Для базовой стек‑навигации достаточно установить @react-navigation/native, @react-navigation/native-stack и react-native-screens, добавить экраны и обернуть всё в NavigationContainer. Для надёжности используйте проверку параметров, тесты и pod install на iOS.

Дополнительные материалы: начните с официальной документации React Navigation и разделов по deep linking и nested navigators, если приложение растёт.