13. Drawer Navigator

Drawer Navigator — боковое меню (hamburger menu). Выдвигается слева. Используется когда разделов много.

Установка

npx expo install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

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

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

const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerStyle: { backgroundColor: '#1e1e2e', width: 280 },
        drawerActiveTintColor: '#cba6f7',
        drawerInactiveTintColor: '#6c7086',
        drawerActiveBackgroundColor: '#313244',
        headerStyle: { backgroundColor: '#181825' },
        headerTintColor: '#cdd6f4',
      }}
    >
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          drawerIcon: ({ color }) => <Ionicons name="home" size={20} color={color} />,
          drawerLabel: 'Главная',
        }}
      />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

Управление Drawer

const navigation = useNavigation();

navigation.openDrawer();
navigation.closeDrawer();
navigation.toggleDrawer();

Кастомное содержимое

import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';

function CustomDrawer(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View style={styles.userSection}>
        <Image source={{ uri: user.avatar }} style={styles.avatar} />
        <Text style={styles.userName}>{user.name}</Text>
      </View>
      <DrawerItemList {...props} />
      <DrawerItem label="Выйти" onPress={logout} labelStyle={{ color: '#f38ba8' }} />
    </DrawerContentScrollView>
  );
}

<Drawer.Navigator drawerContent={props => <CustomDrawer {...props} />}>