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

React Native сам по себе не включает навигацию из коробки, поэтому разработчики устанавливают соответствующие модули вручную.

Установка необходимых пакетов

Для создания базовой навигации используется библиотека @react-navigation/native и дополнительные зависимости:

npm install @react-navigation/native

Затем следует установить зависимости для работы навигации с React Native:

npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

И для использования стека экранов (навигации типа "вперёд/назад"):

npm install @react-navigation/native-stack

Если используется Expo, установка некоторых библиотек производится с помощью npx expo install для обеспечения совместимости.

Базовая настройка

В корневом файле (обычно App.js) нужно обернуть всё приложение в навигационный контейнер NavigationContainer:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createNativeStackNavigator();
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>
);
}

Структура экранов

Создаём отдельные файлы компонентов экранов (например, в папке screens/).

HomeScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';
export default function HomeScreen({ navigation }) {
return (
<View>
<Text>Главный экран</Text>
<Button
title="Перейти на экран деталей"
onPress={() => navigation.navigate('Details', { userId: 42 })}
/>
&lt;/View&gt;
);
}

DetailsScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';
export default function DetailsScreen({ route, navigation }) {
const { userId } = route.params;
return (
<View>
<Text>Экран деталей</Text>
<Text>ID пользователя: {userId}</Text>
<Button title="Назад" onPress={() => navigation.goBack()} />
</View>
);
}

Типы навигации в React Navigation

React Navigation поддерживает несколько систем навигации:

1. Stack Navigation (@react-navigation/native-stack)

• Реализует поведение "вперёд/назад", как в браузере или телефоне.

• Каждый новый экран кладётся поверх предыдущего.

• Позволяет реализовать анимации между экранами (по умолчанию: слайд справа налево).

const Stack = createNativeStackNavigator();

2. Bottom Tab Navigation (@react-navigation/bottom-tabs)

• Создаёт нижнее меню с вкладками.

• Каждая вкладка — это отдельный стек или экран.

npm install @react-navigation/bottom-tabs
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}

3. Drawer Navigation (@react-navigation/drawer)

• Создаёт боковое выезжающее меню.

• Подходит для приложений с большим количеством разделов.

npm install @react-navigation/drawer
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Главная" component={HomeScreen} />
<Drawer.Screen name="О приложении" component={AboutScreen} />
</Drawer.Navigator>
);
}

Навигационные методы

В каждом компоненте, подключённом к навигации, доступен объект navigation с методами:

• navigation.navigate(screenName, params?) — перейти на экран.

• navigation.push(screenName, params?) — добавить ещё один экран того же типа в стек.

• navigation.goBack() — вернуться назад.

• navigation.replace(screenName) — заменить текущий экран новым.

• navigation.pop(n) — вернуться на n экранов назад.

• navigation.popToTop() — вернуться на первый экран в стеке.

Передача параметров

Можно передавать параметры в экраны:

navigation.navigate('Details', { userId: 123, name: 'Алиса' });

В компоненте получателя:

const { userId, name } = route.params;

Настройка заголовков

Можно управлять заголовком в Stack.Screen:

<Stack.Screen
name="Details"
component={DetailsScreen}
options={{ title: 'Информация' }}
/>

Либо динамически изнутри компонента:

React.useLayoutEffect(() => {
navigation.setOptions({ title: 'Новый заголовок' });
}, \[navigation\]);

Кастомизация навигации

React Navigation позволяет тонко настраивать поведение, стили и логику навигации:

• Темы (светлая/тёмная тема)

• Жесты (например, свайп назад)

• Переходы между экранами (анимации)

• Хуки (useNavigation, useRoute) для доступа к навигации в любых компонентах

Хуки для навигации

Если компонент не является экраном (то есть не имеет доступа к navigation и route через props), можно использовать хуки:

import { useNavigation, useRoute } from '@react-navigation/native';
const navigation = useNavigation();
const route = useRoute();

Вложенная навигация

Можно комбинировать стек, вкладки и drawer:

function App() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Главная" component={MainStack} />
<Drawer.Screen name="Профиль" component={ProfileScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
function MainStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
}

Lazy Loading экранов

Экран можно загружать только при первом открытии:

<Stack.Screen
name="HeavyScreen"
getComponent={() => require('./HeavyScreen').default}
/>

Или использовать React.lazy() и Suspense (в Web).

Обработка переходов и защиты маршрутов

Можно использовать условия, чтобы запретить переход или сделать перенаправление:

if (!user) {
navigation.replace('Login');
}

Также можно использовать screenOptions или middleware (на уровне контейнера) для глобальных правил переходов.

Навигация и глобальное состояние

React Navigation может быть интегрирован с Redux, MobX или Context API, чтобы навигационные решения зависели от глобального состояния:

if (isAuthenticated) {
return <MainAppNavigator />;
} else {
return <AuthNavigator />;
}

Так можно легко разделить навигацию для авторизованных и неавторизованных пользователей.

Поддержка Deep Linking

React Navigation поддерживает deep linking (переход по ссылке из браузера, уведомления и т.д.).
Для этого настраивается схема URL, и навигация может автоматически распознать путь:

const linking = {
prefixes: \['myapp://', 'https://myapp.com'\],
config: {
screens: {
Home: 'home',
Details: 'details/:id',
},
},
};
<NavigationContainer linking={linking}>...</NavigationContainer>

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