Навигация

Stack Navigator - Вы открываете новый экран — он ложится сверху. Нажимаете "Назад" — верхний лист убирается

1
2
3
4
5
6
7
8
9
10
11
12
import { createNativeStackNavigator } from '@react-navigation/native-stack';  const Stack = createNativeStackNavigator();  function MyStack() {  return (    <Stack.Navigator initialRouteName="Home">    <Stack.Screen name="Home" component={HomeScreen} />    <Stack.Screen name="Profile" component={ProfileScreen} />    </Stack.Navigator>   );}

Tab Navigator - Панель вкладок в браузере. Вы всегда видите главные разделы и можете переключаться между ними мгновенно, не теряя контекст

1
2
3
4
5
6
7
8
9
10
11
12
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';  const Tab = createBottomTabNavigator();  function MyTabs() {  return (    <Tab.Navigator>      <Tab.Screen name="Feed" component={FeedScreen} />      <Tab.Screen name="Search" component={SearchScreen} />    </Tab.Navigator>  );}

Drawer Navigator - Основные вкладки на виду, а настройки, выход висят сбоку и появляются только когда свайпнешь или нажмешь иконку гамбургера

1
2
3
4
5
6
7
8
9
10
11
12
import { createDrawerNavigator } from '@react-navigation/drawer';  const Drawer = createDrawerNavigator();  function MyDrawer() {  return (    <Drawer.Navigator>      <Drawer.Screen name="Main" component={MyTabs} /> {/* Можно вкладывать табы! */}      <Drawer.Screen name="Settings" component={SettingsScreen} />    </Drawer.Navigator>  );}

Хуки

• useNavigation - для навигации (кнопка "Назад", переход на другой экран).
• useRoute - чтобы получить параметры, переданные на текущий экран.
• useNavigationState - чтобы узнать текущий роут (например, выделить активную иконку).