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

Сегодня мы подробно разберём, как работает React Navigation, настроим её и реализуем простое приложение с Drawer-навигацией (выдвижное меню).

Что такое React Navigation?

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

Ключевые особенности React Navigation:

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

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

Stack Navigation

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

Пример:

Главный экран → Детали → Подробности.

Tab Navigation

Tab (вкладки) — это навигация с переключением между экранами через нижнюю панель. Чаще всего используется для приложений с фиксированными разделами, например, «Домой», «Профиль», «Сообщения».

Drawer Navigation

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

Практика: приложение с Drawer-навигацией

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

Чтобы использовать React Navigation, нужно установить её и несколько зависимостей. В терминале выполните следующие команды:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons
npm install @react-navigation/drawer

expo install @react-navigation/native

После установки не забудьте выполнить:

npx expo install react-native-reanimated

И добавить в babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], // Добавьте эту строку
  };
};

Перезапустите приложение после изменения.

Создание структуры проекта

Создайте файл App.js и добавьте следующую структуру:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

// Импортируем экраны (мы их создадим ниже)
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import SettingsScreen from './screens/SettingsScreen';

// Создаём Drawer Navigator
const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

Создание экранов

Теперь создадим три экрана: Домашний экран, Профиль и Настройки. В папке проекта создайте папку screens и в ней файлы: HomeScreen.js, ProfileScreen.js и SettingsScreen.js.

HomeScreen.js

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

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Добро пожаловать на Главный экран!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

export default HomeScreen;

ProfileScreen.js

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

const ProfileScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Это экран профиля пользователя!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e6f7ff',
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

export default ProfileScreen;

SettingsScreen.js

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

const SettingsScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Настройки приложения здесь!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff8e1',
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

export default SettingsScreen;

Запуск приложения

Теперь запустите приложение (npm start или expo start). Вы увидите главный экран с боковым меню. Свайпните слева направо (или нажмите на значок меню), чтобы открыть Drawer. Вы сможете переключаться между экранами «Home», «Profile» и «Settings».

Разберём ключевые моменты

• NavigationContainer: Это обёртка для всей навигации. Она управляет состоянием и настройкой маршрутов.
• Drawer.Navigator: Главный компонент для Drawer-навигации. Здесь мы задаём маршруты.
• Drawer.Screen: Каждый экран в Drawer — это отдельный Screen.

Дальнейшие шаги

Кастомизация Drawer

Вы можете изменить внешний вид меню, добавив свои иконки и стили через drawerContent:

<Drawer.Navigator
  drawerContentOptions={{
    activeTintColor: 'blue',
    itemStyle: { marginVertical: 5 },
  }}
>

Добавление вложенных навигаций

Реализуйте, например, Tab-навигацию внутри одного из экранов.

Анимации и иконки

Используйте библиотеку react-native-vector-icons для добавления иконок в меню.