@react-navigation/native

@react-navigation/native — это библиотека для навигации в React Native приложениях. Она предоставляет простой и гибкий способ организации навигации в приложении, поддерживая стековую, табовую и другую навигацию. Библиотека широко используется для создания плавных и интуитивно понятных интерфейсов в мобильных приложениях.

Основные возможности @react-navigation/native

• Поддержка стековой, табовой и другой навигации.
• Интеграция с React Native и Expo.
• Поддержка переходов, анимаций и жестов.
• Гибкая настройка навигационных параметров и стилей.
• Легкость в использовании и интеграции в проекты.

Установка

Для установки @react-navigation/native необходимо установить несколько зависимостей.

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

Или с использованием Yarn:

yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context

Основное использование

Для начала работы с @react-navigation/native, создайте NavigationContainer и определите навигационные маршруты.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  </View>
);

const DetailsScreen = () => (
  <View>
    <Text>Details Screen</Text>
  </View>
);

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

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

@react-navigation/native поддерживает несколько типов навигации, таких как стековая, табовая и навигация на основе ящиков.

Стековая навигация

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

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

Табовая навигация

Табовая навигация используется для создания интерфейсов с вкладками.

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

const Tab = createBottomTabNavigator();

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

Навигация на основе ящиков

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

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

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

Передача параметров между экранами

Вы можете передавать параметры между экранами, используя метод navigate и доступ к ним через объект route.

const HomeScreen = ({ navigation }) => (
  <View>
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details', { itemId: 86 })}
    />
  </View>
);

const DetailsScreen = ({ route }) => {
  const { itemId } = route.params;

  return (
    <View>
      <Text>Item ID: {itemId}</Text>
    </View>
  );
};

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

Вы можете настраивать заголовки экранов с помощью параметра options в Stack.Screen.

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'Главная страница' }}
      />
      <Stack.Screen
        name="Details"
        component={DetailsScreen}
        options={{ title: 'Детали' }}
      />
    </Stack.Navigator>
  </NavigationContainer>
);

Глобальная тема навигации

Вы можете настроить глобальную тему для всей навигации, используя параметр theme в NavigationContainer.

import { DefaultTheme, NavigationContainer } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'tomato',
    background: 'white',
  },
};

const App = () => (
  <NavigationContainer theme={MyTheme}>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

Заключение

@react-navigation/native — это мощная и гибкая библиотека для организации навигации в приложениях React Native. Она поддерживает различные типы навигации, предоставляет множество настроек и параметров, и легко интегрируется в проекты. Благодаря @react-navigation/native, разработчики могут создавать плавные и интуитивно понятные интерфейсы для мобильных приложений.