Зачем навигация и установка React Navigation

Понимаем, почему мобильному приложению нужна навигация, и подключаем стандартную библиотеку React Navigation.

Навигация — переходы между экранами приложения: со списка на детали, на профиль, обратно. В мобильном это основа структуры.

Зачем вообще навигация

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

Без навигации приложение — это один экран. Любое реальное приложение состоит из множества экранов, между которыми нужно переходить, передавать данные и возвращаться назад.

React Navigation и Expo Router

В самом React Native навигации нет — её добавляют библиотекой. Исторически самая популярная — React Navigation: она даёт привычные паттерны (стек экранов, вкладки, боковое меню) и по-прежнему широко используется.

При этом новые проекты create-expo-app@latest (Expo SDK 50+) по умолчанию идут с Expo Router — файловой навигацией поверх React Navigation, которую рекомендует официальная документация Expo. В этом разделе мы изучаем именно React Navigation, чтобы понять базовые механизмы (стек, вкладки, контейнер); те же идеи лежат и в основе Expo Router. Если вы создали проект на дефолтном шаблоне, навигация уже подключена через папку app/, и устанавливать React Navigation вручную нужно не во всех проектах.

Установка

Сначала ставим ядро библиотеки и её зависимости. В проекте Expo это делается так:

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

Затем — нужный навигатор. Для стека экранов:

npm install @react-navigation/native-stack

NavigationContainer — корень навигации

Всё дерево навигации обязательно оборачивается в NavigationContainer на верхнем уровне приложения — обычно прямо в App.js. Это «коробка», внутри которой живут все экраны и переходы.

import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  return (
    <NavigationContainer>
      {/* сюда поместим навигатор с экранами */}
    </NavigationContainer>
  );
}

Если забыть NavigationContainer, навигация работать не будет — это первая частая ошибка новичков.

Из чего состоит навигация

Элемент	Роль
`NavigationContainer`	корень, оборачивает всё
Навигатор (Stack/Tabs)	задаёт тип навигации
Screen	один экран приложения

Виды навигаторов

Stack — экраны складываются стопкой, есть «назад». Самый частый.
Bottom Tabs — вкладки снизу (Главная, Поиск, Профиль).
Drawer — выезжающее боковое меню.

В следующих уроках подробно разберём стек и вкладки — два самых нужных вида.

Чем это отличается от роутинга в вебе

Если вы работали с React Router в вебе, отметьте разницу. В вебе навигация завязана на URL: адрес в строке определяет, какая страница показана, а кнопки браузера «назад/вперёд» ходят по истории. В мобильном приложении URL-строки нет — вместо неё есть стек экранов в памяти и системная кнопка/жест «назад». React Navigation как раз моделирует эти мобильные паттерны, а не веб-историю.

Ещё одно отличие: в вебе уход со страницы обычно полностью её выгружает. В мобильном экраны под текущим часто остаются «живыми» в стеке — поэтому при возврате они мгновенно появляются в прежнем состоянии, без повторной загрузки.

Почему отдельные зависимости

Вы заметили, что вместе с библиотекой ставятся react-native-screens и react-native-safe-area-context. Это не случайность: React Navigation опирается на них, чтобы использовать настоящие нативные контейнеры экранов (быстрее и плавнее) и корректно учитывать безопасные зоны (чёлку, системные полосы). Поэтому их установку пропускать нельзя.

Итог

Навигация — переходы между экранами; в мобильном без неё никуда.
Стандарт — библиотека React Navigation, её ставят отдельно.
Всё дерево навигации оборачивают в NavigationContainer на верхнем уровне.