Ein "Drawer" (Schublade) ist das seitlich einblendbare Navigationsmenü, das man vom "Hamburger"-Symbol (☰) kennt – üblich für Apps mit vielen, seltener genutzten Menüpunkten.

1. Beschreibung

@react-navigation/drawer stellt createDrawerNavigator() bereit – strukturell identisch zu createBottomTabNavigator(), nur dass die Navigation seitlich statt unten erscheint und standardmäßig per Wisch-Geste vom Bildschirmrand geöffnet werden kann.

2. Kurzes Beispiel

const Drawer = createDrawerNavigator();

<Drawer.Navigator>
  <Drawer.Screen name="Start" component={StartScreen} />
  <Drawer.Screen name="Einstellungen" component={EinstellungenScreen} />
</Drawer.Navigator>

3. Komplettes Projekt

npx create-expo-app drawer-navigation-demo
cd drawer-navigation-demo
npx expo install @react-navigation/native @react-navigation/drawer
npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler

import { View, Text, StyleSheet } from 'react-native';

function StartScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Startseite – vom linken Rand nach rechts wischen!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
  text: { fontSize: 18, textAlign: 'center' },
});

export default StartScreen;

import { View, Text } from 'react-native';

function EinstellungenScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>⚙️ Einstellungen</Text>
    </View>
  );
}

export default EinstellungenScreen;

import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import StartScreen from './screens/StartScreen';
import EinstellungenScreen from './screens/EinstellungenScreen';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Start">
        <Drawer.Screen name="Start" component={StartScreen} />
        <Drawer.Screen name="Einstellungen" component={EinstellungenScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

4. Erklärung

• import 'react-native-gesture-handler'; – MUSS als allererste Zeile in App.js stehen, noch vor allen anderen Imports, sonst funktionieren die Wisch-Gesten des Drawers auf manchen Plattformen nicht zuverlässig.
• initialRouteName="Start" – legt fest, welcher Bildschirm beim App-Start zuerst angezeigt wird (ohne diese Angabe wäre es einfach der zuerst deklarierte Drawer.Screen).
• Der Drawer öffnet standardmäßig per Wisch-Geste vom linken Bildschirmrand ODER über einen automatisch eingeblendeten Hamburger-Knopf in der Kopfzeile.

5. Ausgaben