React Native: навигация 2025

React Navigation — стандартная библиотека для навигации в React Native приложениях. Версия 7 приносит улучшения производительности, улучшенную типизацию и новые возможности для организации навигации.

Установка

React Navigation требует установки нескольких пакетов: ядро навигации, нативные зависимости и типизацию.

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

Для Expo проектов используйте npx expo install для автоматической установки совместимых версий.

Stack Navigator

Stack Navigator реализует навигацию по стеку — экраны добавляются поверх предыдущих.

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

const Stack = createNativeStackNavigator();

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

function HomeScreen({ navigation }) {
  return (
    <Button 
      title="Открыть детали"
      onPress={() => navigation.navigate('Details', { id: 1 })}
    />
  );
}

function DetailsScreen({ route, navigation }) {
  const { id } = route.params;
  return <Text>ID: {id}</Text>;
}

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

Для типобезопасности используйте TypeScript с параметризованным типом навигатора.

// TypeScript types
type RootStackParamList = {
  Home: undefined;
  Details: { id: number; name?: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

// navigation.navigate с typed params
navigation.navigate('Details', { id: 123 });

Это обеспечивает проверку типов при навигации — вы получите ошибку, если передадите неправильные параметры.

Навигационные опции

Каждый экран можно настроить через options: заголовок, стили, кнопки:

<Stack.Screen 
  name="Details"
  component={DetailsScreen}
  options={{
    title: 'Детали',
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
    animation: 'slide_from_right',
  }}
/>

Bottom Tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName = 'home';
          if (route.name === 'Home') iconName = focused ? 'home' : 'home-outline';
          else if (route.name === 'Settings') iconName = focused ? 'settings' : 'settings-outline';
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Drawer Navigator

npm install @react-navigation/drawer

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

const Drawer = createDrawerNavigator();

function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
    </Drawer.Navigator>
  );
}

Вложенная навигация

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Auth" component={AuthStack} />
        <Stack.Screen name="Main" component={MainTabs} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function AuthStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
    </Stack.Navigator>
  );
}

Actions

// Переход
navigation.navigate('Details');
navigation.push('Details');
navigation.replace('Details');

// Назад
navigation.goBack();
navigation.canGoBack();

// С параметрами
navigation.navigate('Details', { id: 1 });

// Pop to top
navigation.popToTop();

// Программное управление header
useLayoutEffect(() => {
  navigation.setOptions({
    title: 'Новый заголовок',
    headerRight: () => (
      <Button onPress={onPress} title="Настройки" />
    ),
  });
}, [navigation]);