В этой статье блога мы рассмотрим различные методы навигации с помощью библиотеки @react-navigation/native в проекте React Native на основе TypeScript. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство предоставит вам полный обзор различных доступных вам методов навигации. Мы углубимся в примеры кода и будем использовать разговорную речь, чтобы сделать процесс обучения более доступным и приятным. Итак, начнём!

1. Навигация по стеку.
   Метод навигации по стеку позволяет вам управлять экранами вашего приложения как стеком, в котором экраны добавляются и удаляются в порядке очереди. Вот пример использования навигации по стеку:

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
// Inside your component
navigation.navigate('Home');
navigation.push('Profile');
navigation.goBack();

1. Навигация по вкладкам.
   Навигация по вкладкам позволяет переключаться между различными экранами с помощью панели вкладок внизу или вверху приложения. Вот пример:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
// Inside your component
navigation.navigate('Home');
navigation.jumpTo('Profile');

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

import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
// Inside your component
navigation.navigate('Home');
navigation.openDrawer();
navigation.closeDrawer();

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

import { createSwitchNavigator } from '@react-navigation/compat';
const Switch = createSwitchNavigator();
// Inside your component
navigation.navigate('Home');
navigation.navigate('Login');

1. Вложенные навигаторы.
   Вы можете вкладывать навигаторы для создания сложных структур навигации. Например, вы можете объединить навигацию по стеку и вкладкам, чтобы создать иерархическую навигационную систему. Вот пример:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
// Inside your component
navigation.navigate('Home');
navigation.navigate('Profile');
navigation.navigate('Settings');

В этой статье мы рассмотрели различные методы навигации, предоставляемые библиотекой @react-navigation/native в TypeScript. Мы изучили стек, вкладку, ящик, навигацию по переключателям и концепцию вложенных навигаторов. Используя эти методы, вы можете создать интуитивно понятную и плавную навигацию в своих приложениях React Native. Не забудьте обратиться к официальной документации для получения более подробных объяснений и расширенных функций. Приятной навигации!