Что такое навигация в мобильном приложении

В вебе навигация — это URL и React Router. В мобильном приложении — это стек экранов.

Отличия от веба

Стек экранов

Мобильное приложение — это стек экранов. Пользователь открывает Home, нажимает кнопку — открывается Details поверх. Home остаётся в стеке. Кнопка «Назад» возвращает на Home.

Home
 └── Details
      └── Settings

Если ты уже знаешь React

В вебе — <BrowserRouter>, <Routes>, <Route>, useNavigate. В React Native — <NavigationContainer>, <Stack.Navigator>, <Stack.Screen>, useNavigation. Концепции похожи, но API другой.

React Navigation

Стандарт для навигации в React Native. Установка:

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

Для стека:

npx expo install @react-navigation/native-stack

Базовая настройка

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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

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

• Stack — стек экранов (как в iOS)
• Tab — нижние вкладки (как в Instagram)
• Drawer — боковое меню
• Native Stack — быстрый нативный стек

Expo Router

Альтернатива React Navigation — файловый роутинг как в Next.js:

app/
├── index.tsx           → /
├── details.tsx         → /details
└── profile/
    └── [id].tsx        → /profile/123

Если ты знаешь Next.js — Expo Router будет знаком. В этом курсе разбираем React Navigation как классический подход.

Итоги

• Навигация — стек экранов
• React Navigation — стандарт
• NavigationContainer в корне
• Stack.Navigator и Stack.Screen
• Expo Router — альтернатива