Установка и базовая настройка

React Navigation 6 — стандарт де-факто для навигации в React Native. Он поддерживает стековую, табовую и_DRAWER_ навигацию, а также глубокие ссылки.

bash

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

▸Создание корневого навигатора

javascript

1import { NavigationContainer } from '@react-navigation/native';
2import { createNativeStackNavigator } from '@react-navigation/native-stack';
3import HomeScreen from './screens/HomeScreen';
4import DetailsScreen from './screens/DetailsScreen';
5
6const Stack = createNativeStackNavigator();
7
8function App() {
9  return (
10    <NavigationContainer>
11      <Stack.Navigator initialRouteName="Home">
12        <Stack.Screen name="Home" component={HomeScreen} />
13        <Stack.Screen name="Details" component={DetailsScreen} />
14      </Stack.Navigator>
15    </NavigationContainer>
16  );
17}

Стековая навигация (Stack Navigator)

Стековая навигация моделирует поведение навигационного стека: каждый новый экран добавляется поверх предыдущего. Пользователь может вернуться назад свайпом или кнопкой.

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

javascript

1// Навигация с параметрами
2navigation.navigate('Details', {
3  itemId: 86,
4  otherParam: 'anything you want here',
5});
6
7// Получение параметров
8function DetailsScreen({ route }) {
9  const { itemId, otherParam } = route.params;
10  return <Text>Item: {itemId}</Text>;
11}

▸Типизация параметров

typescript

1type RootStackParamList = {
2  Home: undefined;
3  Details: { itemId: number; title: string };
4};
5
6const Stack = createNativeStackNavigator<RootStackParamList>();

Табовая навигация (Tab Navigator)

Табы используются для основных разделов приложения: профиль, поиск, уведомления.

javascript

1import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2import { createNativeStackNavigator } from '@react-navigation/native-stack';
3
4const Tab = createBottomTabNavigator();
5const HomeStack = createNativeStackNavigator();
6
7function HomeStackScreen() {
8  return (
9    <HomeStack.Navigator>
10      <HomeStack.Screen name="Home" component={HomeScreen} />
11      <HomeStack.Screen name="Details" component={DetailsScreen} />
12    </HomeStack.Navigator>
13  );
14}
15
16function App() {
17  return (
18    <Tab.Navigator>
19      <Tab.Screen name="HomeTab" component={HomeStackScreen} />
20      <Tab.Screen name="Profile" component={ProfileScreen} />
21    </Tab.Navigator>
22  );
23}

Drawer-навигация

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

bash

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

javascript

1import { createDrawerNavigator } from '@react-navigation/drawer';
2
3const Drawer = createDrawerNavigator();
4
5function App() {
6  return (
7    <Drawer.Navigator>
8      <Drawer.Screen name="Home" component={HomeScreen} />
9      <Drawer.Screen name="Settings" component={SettingsScreen} />
10    </Drawer.Navigator>
11  );
12}

Глубокие ссылки (Deep Linking)

Deep linking позволяет открывать конкретные экраны по URL. Настройка требует маппинга URL-схем на экраны.

javascript

1const linking = {
2  prefixes: ['myapp://', 'https://myapp.com'],
3  config: {
4    screens: {
5      Home: '',
6      Details: 'item/:id',
7    },
8  },
9};
10
11<NavigationContainer linking={linking}>
12  <Stack.Navigator>...</Stack.Navigator>
13</NavigationContainer>

Анимации переходов

React Navigation поддерживает кастомные анимации переходов через screenOptions:

javascript

1<Stack.Navigator
2  screenOptions={{
3    headerStyle: { backgroundColor: '#f4511e' },
4    headerTintColor: '#fff',
5    animation: 'slide_from_right',
6  }}
7>

Общие ошибки и как их избежать

Отсутствие NavigationContainer — все навигаторы должны быть обёрнуты в него

Рекурсивное создание навигаторов — не создавайте Navigator внутри render-функции

Потеря параметров — проверяйте route.params перед использованием

Отсутствие типизации — используйте TypeScript для Type Safety

Заключение

React Navigation 6 предоставляет мощные возможности навигации и поддерживает различные режимы навигации. Владение комбинацией Stack, Tab и Drawer, понимание deep linking и передачи параметров — обязательные навыки для разработчика React Native. Правильная типизация и оптимизация производительности позволяют создавать плавный пользовательский опыт.

#react-native#navigation#react-navigation#навигация#stack#tabs

React Native≈ 11 мин чтения5 апреля 2024 г.

Navigation в React Native: React Navigation 6

Полное руководство по навигации в React Native: стеки, табы, drawer-меню, глубокие ссылки и передача параметров.

Установка и базовая настройка

bash

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

▸Создание корневого навигатора

javascript

1import { NavigationContainer } from '@react-navigation/native';
2import { createNativeStackNavigator } from '@react-navigation/native-stack';
3import HomeScreen from './screens/HomeScreen';
4import DetailsScreen from './screens/DetailsScreen';
5
6const Stack = createNativeStackNavigator();
7
8function App() {
9  return (
10    <NavigationContainer>
11      <Stack.Navigator initialRouteName="Home">
12        <Stack.Screen name="Home" component={HomeScreen} />
13        <Stack.Screen name="Details" component={DetailsScreen} />
14      </Stack.Navigator>
15    </NavigationContainer>
16  );
17}

Стековая навигация (Stack Navigator)

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

javascript

1// Навигация с параметрами
2navigation.navigate('Details', {
3  itemId: 86,
4  otherParam: 'anything you want here',
5});
6
7// Получение параметров
8function DetailsScreen({ route }) {
9  const { itemId, otherParam } = route.params;
10  return <Text>Item: {itemId}</Text>;
11}

▸Типизация параметров

typescript

1type RootStackParamList = {
2  Home: undefined;
3  Details: { itemId: number; title: string };
4};
5
6const Stack = createNativeStackNavigator<RootStackParamList>();

Табовая навигация (Tab Navigator)

Табы используются для основных разделов приложения: профиль, поиск, уведомления.

javascript

1import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2import { createNativeStackNavigator } from '@react-navigation/native-stack';
3
4const Tab = createBottomTabNavigator();
5const HomeStack = createNativeStackNavigator();
6
7function HomeStackScreen() {
8  return (
9    <HomeStack.Navigator>
10      <HomeStack.Screen name="Home" component={HomeScreen} />
11      <HomeStack.Screen name="Details" component={DetailsScreen} />
12    </HomeStack.Navigator>
13  );
14}
15
16function App() {
17  return (
18    <Tab.Navigator>
19      <Tab.Screen name="HomeTab" component={HomeStackScreen} />
20      <Tab.Screen name="Profile" component={ProfileScreen} />
21    </Tab.Navigator>
22  );
23}

Drawer-навигация

bash

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

javascript

1import { createDrawerNavigator } from '@react-navigation/drawer';
2
3const Drawer = createDrawerNavigator();
4
5function App() {
6  return (
7    <Drawer.Navigator>
8      <Drawer.Screen name="Home" component={HomeScreen} />
9      <Drawer.Screen name="Settings" component={SettingsScreen} />
10    </Drawer.Navigator>
11  );
12}

Глубокие ссылки (Deep Linking)

Deep linking позволяет открывать конкретные экраны по URL. Настройка требует маппинга URL-схем на экраны.

javascript

1const linking = {
2  prefixes: ['myapp://', 'https://myapp.com'],
3  config: {
4    screens: {
5      Home: '',
6      Details: 'item/:id',
7    },
8  },
9};
10
11<NavigationContainer linking={linking}>
12  <Stack.Navigator>...</Stack.Navigator>
13</NavigationContainer>

Анимации переходов

React Navigation поддерживает кастомные анимации переходов через screenOptions:

javascript

1<Stack.Navigator
2  screenOptions={{
3    headerStyle: { backgroundColor: '#f4511e' },
4    headerTintColor: '#fff',
5    animation: 'slide_from_right',
6  }}
7>

Общие ошибки и как их избежать

Отсутствие NavigationContainer — все навигаторы должны быть обёрнуты в него

Рекурсивное создание навигаторов — не создавайте Navigator внутри render-функции

Потеря параметров — проверяйте route.params перед использованием

Отсутствие типизации — используйте TypeScript для Type Safety

Заключение

#react-native#navigation#react-navigation#навигация#stack#tabs

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

Navigation в React Native: React Navigation 6

Установка и базовая настройка

▸Создание корневого навигатора

Стековая навигация (Stack Navigator)

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

▸Типизация параметров

Табовая навигация (Tab Navigator)

Drawer-навигация

Глубокие ссылки (Deep Linking)

Анимации переходов

Общие ошибки и как их избежать

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

Navigation в React Native: React Navigation 6

Установка и базовая настройка

▸Создание корневого навигатора

Стековая навигация (Stack Navigator)

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

▸Типизация параметров

Табовая навигация (Tab Navigator)

Drawer-навигация

Глубокие ссылки (Deep Linking)

Анимации переходов

Общие ошибки и как их избежать

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня