Навигация в React Native с React Navigation

Важно: в современных версиях React Navigation предпочтительно использовать хук useNavigation и объект route.params вместо устаревшего navigation.getParam.

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

Основные паттерны навигации

React Navigation предлагает три ключевых паттерна:

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

Выбор зависит от UX: последовательные потоки удобнее реализовать через Stack, основные разделы — через Tab, а вспомогательные или редкие функции — через Drawer.

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

Чтобы начать, установите базовый пакет и обязательные зависимости:

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

После установки потребуется отдельная установка для каждого конкретного навигатора (Stack/Tab/Drawer) — далее показаны примеры.

Структура проекта и место навигатора

Рекомендуемая минимальная структура:

• src/
  • screens/
  • navigation/
  • components/

Создайте файл App.js как верхний компонент, в котором будет располагаться NavigationContainer и корневой навигатор. Это обеспечивает единый контекст навигации, простую передачу глобальных пропсов и доступ ко всему дереву экранов.

Stack Navigator

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

Пример базовой настройки (Stack):

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:

npm install @react-navigation/stack

Пример простого HomeScreen, который вызывает навигацию:

import { StyleSheet, View, Button } from "react-native";
import React from "react";

const HomeScreen = ({ navigation }) => {
  return (
    
       navigation.navigate("Details")}
      />
    
  );
};

export default HomeScreen;

const styles = StyleSheet.create({});

Stack автоматически добавляет элемент управления «назад», когда есть предыдущие экраны.

Tab Navigator

Tab Navigator удобен для разделения приложения на независимые основные разделы (например: Главная, Профиль, Настройки). В мобильном интерфейсе вкладки обычно размещаются внизу.

Установка Bottom Tabs:

npm install @react-navigation/bottom-tabs

Создание таб-навигации:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

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

Заметка: параметры вроде tabBarPosition зависят от версии и платформы; на iOS и Android чаще используется нижняя панель.

Drawer Navigator

Drawer — выдвижное меню, подходящее для доступа к редким разделам или дополнительным функциям. Drawer можно открыть свайпом или кнопкой.

Установка Drawer и сопутствующих библиотек:

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

Реактивная библиотека Reanimated требует добавления плагина в babel.config.js:

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

Пример Drawer с кастомным содержимым:

import "react-native-gesture-handler"; // Импорт должен быть вверху

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 (
    
      
        Добро пожаловать в Drawer
      
      
        Здесь можно разместить дополнительный функционал: профиль, поиск, фильтры.
      
       navigation.closeDrawer()} />
    
  );
};

const App = () => (
  
     }
    >
      {/* Здесь ваши экраны */}
    
  
);

export default App;

Drawer удобно использовать как динамическую альтернативу вкладкам: он не занимает экран постоянно и подходит для вспомогательных меню.

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

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

Современный и рекомендуемый способ — использовать navigation.navigate с объектом параметров и получать их через хук useRoute:

Пример отправки данных из HomeScreen:

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

const HomeScreen = ({ navigation }) => {
  const handleItemPress = (item) => {
    navigation.navigate('DetailScreen', { item });
  };

  return (
    
      Список элементов
       handleItemPress('Данные элемента 1')} />
       handleItemPress('Данные элемента 2')} />
    
  );
};

export default HomeScreen;

Приём параметра в DetailScreen с помощью useRoute:

import React from 'react';
import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const DetailScreen = () => {
  const route = useRoute();
  const { item = '' } = route.params || {};

  return (
    
      Экран деталей
      {item}
    
  );
};

export default DetailScreen;

Важно: navigation.getParam считался устаревшим — предпочитайте хуки useNavigation и useRoute или типизированные параметры при использовании TypeScript.

Альтернативы для передачи данных между экранами:

• Global state (Redux/MobX/Recoil) — для данных, которые используются в разных частях приложения.
• Context API — для вложенных компонентов и локально доступного состояния.
• Deep linking и URL-параметры — для переходов извне приложения.

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

Разбейте навигацию на модули для читаемости и масштабируемости:

• src/navigation/RootNavigator.js — корневой контейнер и объединение основных навигаторов.
• src/navigation/AuthNavigator.js — стек/вкладки для экранов аутентификации.
• src/navigation/AppTabs.js — определение Tab Navigator.
• src/navigation/AppDrawer.js — Drawer и его содержимое.
• src/screens/* — сами экраны.

Преимущества: проще тестировать, легче рефакторить, можно подключать разные навигаторы под разные роли (гость, пользователь, админ).

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

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

Mermaid-диаграмма принятия решения:

flowchart TD
  A[Начало: проект мобильного приложения] --> B{Что важнее?}
  B -->|Линейные процессы| C[Stack Navigator]
  B -->|Разделы/разделы приложения| D[Tab Navigator]
  B -->|Много редких опций| E[Drawer Navigator]
  C --> F[Вложенные стеки для деталей]
  D --> G[Вложенные стеки в каждой вкладке]
  E --> H[Кастомный DrawerContent для профиля/поиска]

Практические рекомендации и лучшие практики

• Размещайте NavigationContainer в верхнем компоненте (App.js). Это упрощает интеграцию с провайдерами состояний (Redux/Context).
• Используйте TypeScript для описания типов навигации — это снижает ошибки при передаче параметров.
• Минимизируйте количество параметров, передаваемых через навигацию; если данных много — используйте глобальный стейт или временный кеш.
• Кастомизируйте заголовки через options и используйте компонент headerRight/headerLeft для кнопок.
• Поддерживайте доступность: добавляйте доступные названия (accessibilityLabel) для кнопок навигации.
• Тестируйте поведение «Назад» на Android (hardware back) и интегрируйте его в логику навигации при необходимости.

Когда навигация не решит задачу: примеры и контрпримеры

• Контрпример: если нужно синхронизировать состояние между несколькими вкладками (например, корзина товара), навигационные параметры не годятся — нужен глобальный стейт.
• Контрпример: для длительных форм с автосохранением лучше хранить черновик в локальном хранилище или в Redux, а не передавать большие объёмы через навигацию.
• Контрпример: когда требуется точный контроль транзакций и отмены (rollback), навигация не заменит транзакционный слой на сервере.

Список проверки для ролей (Role-based checklist)

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

• Навигатор размещён в App.js
• Заголовки и кнопки навигации доступны
• Адаптация под разные экраны и плотности пикселей

Разработчик backend/integration:

• Эндпоинты соответствуют уникальным идентификаторам (ID) для маршрутов
• Поддержка deep linking и универсальных ссылок

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

• Проверить переходы по всем маршрутам
• Проверить возврат назад и восстановление стека
• Проверить передачу параметров и их обработку при null/undefined

Совместимость, миграция и заметки по версиям

• Всегда проверяйте релиз-ноты React Navigation при обновлении — API хранилища и плагины (react-native-reanimated, gesture-handler) могут требовать изменений конфигурации.
• Для Expo-проектов используйте совместимые версии пакетов (иногда Expo содержит предустановленные зависимости).
• При миграции с v4 → v5+ меняется подход к навигаторам и контейнерам; предпочтительно читать официальную документацию по миграции.

Краткая методология внедрения навигации (mini-methodology)

1. Определите информационную архитектуру приложения (основные разделы и потоки).
2. Выберите главный паттерн (Stack/Tab/Drawer) и нарисуйте карту экранов.
3. Создайте структуру каталогов navigation/screens.
4. Реализуйте базовый навигатор в App.js с NavigationContainer.
5. Подключите передачу параметров и протестируйте основные сценарии.
6. Добавьте типизацию и интеграцию со стейтом при необходимости.

1‑линейный глоссарий

• NavigationContainer — корневой провайдер навигации.
• Stack Navigator — стековый навигатор: push/pop экранов.
• Tab Navigator — вкладочная панель для основных разделов.
• Drawer Navigator — выдвижное боковое меню.
• route.params — объект параметров текущего маршрута.

Итог

React Navigation даёт гибкий набор инструментов для организации навигации в React Native: стековые переходы, вкладки и выдвижные меню. Подходите к выбору паттерна с учётом пользовательских сценариев, держите навигатор в верхнем уровне приложения и используйте современные хуки (useNavigation, useRoute). Для сложных состояний рассматривайте глобальные решения (Redux/Context) и типизацию через TypeScript.

Ключевые шаги: определить архитектуру, выбрать паттерн, разместить NavigationContainer в App.js, реализовать передачу параметров через route.params и покрыть сценарии тестами.

Заметка: при использовании react-native-reanimated не забудьте добавить плагин в babel.config.js и перезапустить сборку.