Обзор библиотек для навигации в React Native

Главная

База знаний

react-native

Навигация и UI

15 сентября 2025

Автор

Олег Марков

Введение

Навигация — один из ключевых аспектов в мобильной разработке. Когда вы создаёте приложение на React Native, задача организации переходов между экранами возникает довольно быстро. Большинство приложений требует стэков навигации, вкладок, модальных окон и других форм перемещения по интерфейсу. В экосистеме React Native существует несколько популярных библиотек для этих целей, и у каждой из них есть свои плюсы, недостатки и особенности внедрения.

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

Общее описание

React Navigation — одна из самых популярных и универсальных библиотек для организации навигации в React Native-приложениях. Она предоставляет гибкий API и поддерживает разные виды навигации: стэковую, табовую (вкладки), дровер-меню (бургер-меню), а также вложенную и комбинированную навигацию. Библиотека реализована на JavaScript и имеет большое сообщество, подробную документацию и множество плагинов.

Выбор библиотеки для навигации - важное решение при разработке React Native приложения. Различные библиотеки предлагают разные подходы к навигации, функциональность и уровень кастомизации. Чтобы сделать правильный выбор, необходимо понимать особенности каждой библиотеки и учитывать требования вашего проекта. Если вы хотите детально разобраться в библиотеках для навигации в React Native и научиться выбирать подходящую для ваших нужд — приходите на наш большой курс React Native и Expo Router. На курсе 184 уроков и 11 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Основные возможности

Стэковая навигация (Stack Navigation)
Вкладки (Tab Navigation)
Дровер (Drawer Navigation)
Глубокое связывание (Deep Linking)
Работа с параметрами и состоянием навигации
Вложенная навигация (комбинирование разных типов)

Установка и настройка

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

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

Если планируете использовать Stack навигатор:

npm install @react-navigation/stack

Давайте посмотрим, как организовать стэковую навигацию на практике.

// Импортируем необходимые модули
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Определяем два экрана
function HomeScreen({ navigation }) {
  return (
    <Button
      title="Перейти к Details"
      onPress={() => navigation.navigate('Details')} // Переход к экрану Details
    />
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Экран деталей</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} /> 
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

В этом примере я использую двухэкранный обработчик. Компонент NavigationContainer нужен для отслеживания и управления стэком экранов, а Stack.Navigator позволяет объявлять последовательность переходов и экраны.

Пример — Bottom Tabs

Если приложение требует навигацию по вкладкам, подключите пакет вкладок:

npm install @react-navigation/bottom-tabs

Вот как выглядит базовый вариант:

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

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Когда использовать

React Navigation подойдет вам, если:

Нужно быстро внедрить стандартную навигацию
Вы делаете кросс-платформенное приложение (iOS и Android)
Важно большое сообщество и обучающие материалы
Требуется гибкая вложенная навигация

Плюсы и минусы

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

Общее описание

React Native Navigation — альтернатива от компании Wix, рассчитанная на максимальную «нативность» переходов между экранами. Эта библиотека использует настоящие нативные переходы и экраны платформ, что может повысить производительность в больших проектах, особенно с множеством взаимодействий между экранами.

Основные возможности

Абсолютно нативные анимации и переходы
Поддержка стэков, вкладок, дроверов, модальных окон
Высокая производительность на больших приложениях
Работа с глубоким связыванием (Deep Linking)
Более плотная интеграция с Android и iOS-функциями

Установка и настройка

Установка здесь сложнее — библиотека требует наличия Xcode и Android Studio:

npm install react-native-navigation

Далее нужно обновить нативные проекты. Пример для iOS:

cd ios
pod install

Минимальная настройка главного файла index.js выглядит так:

import { Navigation } from 'react-native-navigation';
import App from './App';

// Регистрация корневого компонента приложения
Navigation.registerComponent('Home', () => App);

// Запуск приложения с экраном "Home"
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home'
            }
          }
        ]
      }
    }
  });
});

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

Пример перехода между экранами

// Переход к новому экрану из обработчика
Navigation.push(componentId, {
  component: {
    name: 'Details',
    passProps: {
      someParam: 'Значение'
    }
  }
});

Когда использовать

React Native Navigation хорош для приложений, где:

Есть строгие требования к производительности и плавности анимаций
Необходимо максимально приближеное к платформенному поведению навигации
Ваш проект содержит очень много экранов

Плюсы и минусы

Плюсы: Высочайшая нативность, производительность, расширенные возможности по стилизации заголовков, модалей, жестов
Минусы: Большее количество нативных настроек, требуется конфигурирование Xcode и Android Studio, сложнее масштабировать и комбинировать с не-нэйтивными библиотеками

React Router Native

Общее описание

React Router — знаменитая библиотека маршрутизации для React на web, имеет нативное расширение — React Router Native. Она подойдет для проектов, которые хотят использовать привычную web-парадигму роутеров.

Основные возможности

Аналогичная синтаксису web-версии API
Удобство для тех, кто привык к поведению веб-приложений
Простота интеграции в существующие web-React проекты

Установка и пример

npm install react-router-native

Базовый пример:

import { NativeRouter, Route, Link } from 'react-router-native';

export default function App() {
  return (
    <NativeRouter>
      <View>
        <Link to="/about">
          <Text>Перейти к "О программе"</Text>
        </Link>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </View>
    </NativeRouter>
  );
}

Когда использовать

Если вы пишете кроссплатформенный Web + React Native проект
Если навигация приближена к URL-маршрутизации (но помните, что в мобильной среде она менее популярна)

Другие библиотеки и альтернативы

Expo Router

Expo Router — сравнительно новое решение, делающее навигацию максимально похожей на файловую структуру Next.js. Если ваш проект создан на Expo, вы можете использовать эту библиотеку для автоматического формирования экранов по структуре файлов.

Возможности

Автоматическое определение экранов на основе дерева файлов
Простая организация больших проектов
Совместимость с Expo Go

Пример использования

Создаете файл app/index.js для главного экрана, а файлы в app/profile.js и app/settings.js автоматически становятся навигируемыми экранами.

Когда использовать

Если ваш проект основан на Expo и вы хотите интуитивно понятную систему маршрутизации без явной конфигурации.

Существуют также менее распространённые решения, например:

react-native-router-flux — исторически популярный, но сейчас развивается медленнее, чем основные конкуренты.
wouter-native и другие экспериментальные решения.

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

Лучшие практики и советы

Старайтесь выбирать библиотеку с учетом требований к анимации и производительности; для обычных приложений достаточно React Navigation.
Продумывайте структуру путей и вложенности заранее, чтобы избежать путаницы в навигации.
Не забывайте о поддержке Deep Linking, если ваше приложение взаимодействует с другими (например, открывает по ссылкам).
Если нужен web-вариант навигации для ваших экранов, обратите внимание на Expo Router или React Navigation с поддержкой web.
Для крупных проектов обязательно тестируйте производительность на старых устройствах, чтобы избежать «лагов» на сложных переходах.
Читайте changelog и документацию библиотеки перед обновлением — иногда обновления ломают обратную совместимость.

Заключение

Навигация — фундамент мобильной архитектуры. В экосистеме React Native нет одной «лучшей» библиотеки; выбор всегда завязан на особенности приложения: нужны ли сложные анимации, важна ли производительность, работаете ли вы с Expo или планируете кросс-платформенность, насколько критична простота внедрения.

React Navigation универсален, прост и совместим с большинством сценариев. React Native Navigation — фаворит тех, кто делает максимально «нативное» приложение и готов работать с нативным кодом. React Router Native пригодится, если вы хотите единый подход с web-React приложением, а Expo Router отлично подойдёт для быстрых стартов в мире Expo.

Смотрите на размер и качество сообщества, документацию и практические примеры, чтобы сделать лучший выбор для своей задачи.

Выбор библиотеки навигации - это важный, но не единственный аспект разработки качественного React Native приложения. Для создания полноценного приложения необходимо освоить множество других технологий и подходов, включая работу с UI, данными и нативными функциями. Курс React Native и Expo Router поможет вам в этом. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир React Native прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

В: Как реализовать глубокое связывание (Deep Linking) в React Navigation?
О: Используйте пропсы linking в NavigationContainer, где указываете схемы, экраны и пути. Например: js const linking = { prefixes: ['myapp://', 'https://myapp.com'], config: { screens: { Home: '', Profile: 'profile/:id', }, }, }; // Передайте linking={linking} в NavigationContainer

В: Как сбросить стек навигации и вернуться к начальному экрану? (React Navigation)
О: Используйте метод navigation.reset: js navigation.reset({ index: 0, routes: [{ name: 'Home' }] });

В: Почему экран не перерисовывается при возврате назад?
О: React Navigation по умолчанию кэширует экраны в стеке. Если вам нужно обновление данных, можно использовать событие focus: js useFocusEffect( React.useCallback(() => { // Логика обновления данных }, []) );

В: Как добавить заголовок (header) кастомного вида?
О: Для StackNavigator в React Navigation есть опция options: js <Stack.Screen name="Home" component={HomeScreen} options={{ header: () => <MyCustomHeader /> }} />

В: Как реализовать анимацию переходов между экранами в React Native Navigation?
О: В options каждого компонента используйте поле animations, где задаете тип анимации: js Navigation.push(componentId, { component: { name: 'ScreenName', options: { animations: { push: { waitForRender: true, content: { alpha: { from: 0, to: 1, duration: 300 } } } } } } });