React Navigation для React Native: навигация в мобильных приложениях

Почему навигация важна

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

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

Important: Примеры кода в статье — рабочие фрагменты. Если вы используете Expo или bare React Native, убедитесь, что зависимости и конфигурация babel соответствуют вашему окружению.

Кому полезна эта статья

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

Основные навигационные паттерны (интенция: выбор подхода)

• Stack — для пошаговой, иерархической навигации (переходы «вперед/назад»).
• Tab — для главных разделов приложения с быстрым переключением.
• Drawer — для скрытого/контекстного меню, когда нужно убрать навигационные элементы с экрана.

Установка библиотеки React Navigation

React Navigation предоставляет базовый пакет и отдельные пакеты для каждого навигатора. Установите основной пакет и дополнительные зависимости:

npm install @react-navigation/native  
npm install react-native-screens react-native-safe-area-context  

Notes: Для bare React Native может понадобиться выполнить pod install в iOS-проекте. Для Expo некоторые зависимости уже предустановлены.

Структура проекта и хорошие практики

Рекомендуемая простая структура проекта:

• src/
  • screens/ — экранные компоненты
  • navigation/ — конфигурация навигаторов
  • components/ — повторно используемые UI-компоненты
  • hooks/, store/, utils/ — по необходимости

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

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

Установка конкретных навигаторов

Каждый навигатор живёт в своей библиотеке. Примеры команд установки вы найдёте в разделах ниже для Stack, Tab и Drawer.

Stack Navigator

Stack Navigator — самый распространённый паттерн. Он использует структуру «стек», где новый экран помещается поверх предыдущего.

Пример из исходного материала (с сохранением кода):

import React from 'react';  
import { NavigationContainer } from '@react-navigation/native';  
import { createStackNavigator } from '@react-navigation/stack';  
  
// Import your screen components  
import HomeScreen from './screens/HomeScreen';  
import DetailsScreen from './screens/DetailsScreen';  
  
const Stack = createStackNavigator();  
  
const App = () => {  
  return (  
      
        
          
          
        
      
  );  
};  
  
export default App;  

Установка Stack Navigator:

npm install @react-navigation/stack  

Обратите внимание: Stack автоматически создаёт кнопку «назад» в заголовке (если используется стандартный header). Вы можете настраивать header, анимации и опции переходов.

Пример HomeScreen из исходника:

import { StyleSheet, View, Button } from "react-native";  
import React from "react";  
  
const HomeScreen = ({ navigation }) => {  
  return (  
      
       navigation.navigate("DetailScreen")}  
      />  
      
  );  
};  
  
export default HomeScreen;  
  
const styles = StyleSheet.create({});

Важно: в современных версиях React Navigation рекомендуется вместо navigation.getParam использовать параметры, передаваемые через route.params. Ниже — альтернатива с route (современный подход):

// Пример современного получения параметров
import React from 'react';
import { View, Text } from 'react-native';

const DetailScreen = ({ route, navigation }) => {
  const { item } = route.params || {};
  return (
    
      Detail Screen
      {item}
    
  );
};

export default DetailScreen;

Tab Navigator

Tab Navigator удобен, когда у приложения есть несколько равнозначных разделов. Устанавливается пакет нижних табов и создаётся Tab.Navigator.

Установка:

npm install @react-navigation/bottom-tabs

Пример создания Tab Navigator (сохранён оригинальный стиль кода):

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';  
  
const Tab = createBottomTabNavigator();  

Пример App с табами:

export default function App() {  
  return (  
      
        
            
            
            
        
      
  );  
}  

Замечание: хотя в коде выше опция title показывает текст в заголовке, вы можете локализовать текст для пользователей (например, “Главная”, “Профиль”). В кодовых названиях экранов лучше сохранять англоязычные идентификаторы, если команда использует их консистентно.

Советы по табам:

• Используйте не более 4–5 основных табов.
• Подумайте о вынесении менее часто используемых пунктов в Drawer или «еще».
• Настраивайте иконки и доступность (accessibilityLabel).

Drawer Navigator

Drawer (выдвижное меню) подходит для навигации, которая должна быть доступна, но не занимать место постоянно.

Установка и зависимости:

npm install @react-navigation/drawer  
npm install react-native-gesture-handler react-native-reanimated  

Требуется настройка react-native-reanimated в babel.config.js:

module.exports = {  
    presets: ["babel-preset-expo"],  
    plugins: ["react-native-reanimated/plugin"],  
};

Пример (сохранён исходный код):

import "react-native-gesture-handler"; // This import must be at the top  
  
import { View, Text, Button } from "react-native";  
import { createDrawerNavigator } from "@react-navigation/drawer";  
import { NavigationContainer } from "@react-navigation/native";  
  
const Drawer = createDrawerNavigator();  
  
const DrawerContent = ({ navigation }) => {  
  return (  
      
        
        Welcome to the Drawer  
        
        
        This is some extra content that you can display in the drawer.  
        
       navigation.closeDrawer()} />  
      
  );  
};  
  
const App = () => (  
    
     }  
    >  
      {/* Your other screens here */}  
      
    
);  
  
export default App;  

Практические советы по Drawer:

• Не перегружайте пунктами — максимум 7–8 видимых элементов.
• Размещайте часто используемые функции ближе к верху.
• Поддерживайте контекст: профиль, настройки, поиск, выход.

Передача данных между экранами

React Navigation позволяет передавать параметры при навигации.

Исходный пример передачи данных (сохранён):

import React from 'react';  
import { View, Text, Button } from 'react-native';  
  
const HomeScreen = ({ navigation }) => {  
  const handleItemPress = (item) => {  
    navigation.navigate('DetailScreen', { item });  
  };  
  
  return (  
      
      List of Items  
       handleItemPress('Item 1 Data')} />  
       handleItemPress('Item 2 Data')} />  
      
  );  
};  
  
export default HomeScreen;  

И пример получения параметра через navigation.getParam (устаревающий способ):

import React from 'react';  
import { View, Text } from 'react-native';  
  
const DetailScreen = ({ navigation }) => {  
  const item = navigation.getParam('item', '');  
  
  return (  
      
      Detail Screen  
      {item}  
      
  );  
};  
  
export default DetailScreen;  

Совет: используйте modern API — route.params — для лучшей совместимости с текущими версиями и TypeScript.

Организация навигационного кода (модуляризация)

Рекомендуется вынести навигацию в отдельную папку src/navigation:

• src/navigation/AppNavigator.js — корневой навигатор
• src/navigation/StackNavigator.js — стековые экраны
• src/navigation/TabNavigator.js — вкладки
• src/navigation/DrawerNavigator.js — выдвижное меню

Преимущества:

• Меньше кода в App.js
• Проще писать тесты на навигационную логику
• Удобно подключать middleware, deep links, state persistence

Когда какой паттерн выбрать — простая эвристика

• Если навигация линейная/иерархическая — Stack.
• Если есть 3–5 равнозначных разделов — Tab.
• Если меню содержит много пунктов, либо оно должно быть скрыто — Drawer.
• Комбинация: часто используют Tab внутри Stack или Stack внутри Tab (например, вкладки для основных разделов, а внутри вкладки — стек экранов).

Mermaid диаграмма — выбор паттерна:

flowchart TD
  A[Начало] --> B{Есть ли 3-5 основных разделов?}
  B -- Да --> C[Tab Navigator]
  B -- Нет --> D{Нужны ли иерархические переходы?}
  D -- Да --> E[Stack Navigator]
  D -- Нет --> F{Меню должно быть скрыто?}
  F -- Да --> G[Drawer Navigator]
  F -- Нет --> H[Комбинация 'Stack + Tab или Tab + Stack']

Тестирование навигации — тест-кейсы и приёмка

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

• Пользователь может открыть и закрыть Drawer с основного экрана.
• Навигация между табами происходит мгновенно без ошибок.
• Кнопка “назад” корректно возвращает на предыдущий экран.
• Параметры, переданные при navigate, доступны на целевом экране.
• Deep link открывает ожидаемый экран.

Примеры тест-кейсов:

• TC-01: Нажать на кнопку в Home, перейти в Detail и убедиться, что отображается переданная строка.
• TC-02: Переключиться между вкладками и проверить, что состояние каждой вкладки сохраняется (если это требование).
• TC-03: Открыть Drawer свайпом и по кнопке, проверить содержимое и закрытие.

Роли и чек-лист внедрения

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

• Установить @react-navigation/native и зависимости.
• Настроить NavigationContainer в корне.
• Создать модули навигаторов в src/navigation.
• Настроить передачу параметров и обработку route.params.

UI/UX дизайнер:

• Решить, какие разделы доступны в табах, а что — в Drawer.
• Предоставить иконки и состояния для табов (active/disabled).

Тестировщик:

• Подготовить тестовые сценарии навигации.
• Проверить корректность обработки глубинных ссылок.

Product Owner:

• Подтвердить структуру навигации на основе пользовательских потоков.

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

• Использовать только кастомную навигацию (редко оправдано; большое количество работы по анимациям, управлению стеком и accessibility).
• Управлять навигацией через state-management (Redux) — допустимо для синхронизации состояния, но не заменяет навигационную библиотеку.
• Использовать сторонние обёртки/библиотеки для экранов с сложной маршрутизацией, если требуется специфическое поведение.

Миграция и совместимость

• При переходе между мажорными версиями React Navigation проверяйте changelog — API может меняться (например, переход от getParam к route.params).
• Следите за требованиями к react-native-reanimated (плагин в babel.config.js).
• Для iOS-проектов не забывайте pod install после добавления нативных зависимостей.

Безопасность и приватность

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

Производительность и SLI/SLO (общее руководство)

• Минимизируйте тяжёлые вычисления в componentDidMount/эффектах экранов: это уменьшит задержки при переходах.
• Для сложных экранов используйте ленивую загрузку (lazy) или асинхронный импорт компонентов.

Сценарии отказа — когда навигация может подвести

• Конфликты версий зависимостей (react-native-reanimated, gesture-handler).
• Попытки хранить большие объёмы данных в параметрах навигации.
• Неправильная конфигурация deep links, особенно при наличии нескольких навигаторов.

Быстрый чек-лист для релиза

• NavigationContainer настроен и оборачивает приложение.
• Все используемые навигаторы установлены и протестированы на основных платформах.
• Babel настроен для reanimated (если используется).
• Deep links протестированы.
• Тест-кейсы по навигации проходят на устройстве/симуляторе.

Playbook: добавить новый экран и подключить его в навигаторе

1. Создать файл src/screens/NewScreen.js.
2. Экспортировать React-компонент по умолчанию.
3. Добавить импорт и в StackNavigator.
4. Протестировать переход navigation.navigate(‘New’).
5. Обновить тест-кейсы и документацию.

Краткая методология локализации (если ваш продукт мультиязычный)

• Храните строки UI в ресурсах (i18n) и показывайте локализованные title/labels в options экранов.
• Для title в навигаторах используйте options: { title: t(‘home.title’) }.

1-строчный глоссарий

• NavigationContainer — корневой провайдер контекста навигации.
• Stack — навигатор со стековой моделью переходов.
• Tab — навигатор с вкладками.
• Drawer — выдвижное меню.

Итог: как двигаться дальше

• Начните с простой структуры (Stack или Tab) и расширяйте по необходимости.
• Модульно организуйте навигацию в src/navigation.
• Покройте навигационные потоки тестами и предусмотрите обработку ошибок при отсутствии параметров.

Summary:

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

Если нужно, я могу предоставить готовый шаблон проекта с настроенным AppNavigator, примерами экранов и конфигурацией babel.config.js для reanimated.