Eine Tab-Leiste am unteren Bildschirmrand (Start, Suche, Konto, ...) ist eines der gebräuchlichsten Navigationsmuster in mobilen Apps. React Native selbst bringt keine Navigation mit – wir nutzen die Standard-Bibliothek @react-navigation/bottom-tabs.

1. Beschreibung

createBottomTabNavigator() erzeugt einen Navigator, der mehrere Bildschirme als Tabs registriert – jeder Tab bekommt einen Namen, eine Ziel-Komponente und optional ein Icon.

2. Kurzes Beispiel

const Tab = createBottomTabNavigator();

<Tab.Navigator>
  <Tab.Screen name="Start" component={StartScreen} />
  <Tab.Screen name="Konto" component={KontoScreen} />
</Tab.Navigator>

3. Komplettes Projekt

npx create-expo-app tab-navigation-demo
cd tab-navigation-demo
npx expo install @react-navigation/native @react-navigation/bottom-tabs
npx expo install react-native-screens react-native-safe-area-context

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

function StartScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>???? Startseite</Text>
    </View>
  );
}

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

export default StartScreen;

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

function KontoScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>???? Mein Konto</Text>
    </View>
  );
}

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

export default KontoScreen;

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import StartScreen from './screens/StartScreen';
import KontoScreen from './screens/KontoScreen';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ headerShown: true }}>
        <Tab.Screen name="Start" component={StartScreen} />
        <Tab.Screen name="Konto" component={KontoScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

4. Erklärung

• NavigationContainer – umschließt die GESAMTE Navigationsstruktur, genau einmal pro App, unabhängig davon wie viele Navigatoren Sie kombinieren.
• createBottomTabNavigator() – erzeugt ein Paar zusammengehöriger Komponenten (Tab.Navigator, Tab.Screen), ähnlich wie createNativeStackNavigator() bei Stack-Navigation.
• screenOptions={{ headerShown: true }} – gilt für ALLE Tabs gleichzeitig; einzelne Tabs können das über eigene options auf Tab.Screen überschreiben.
• name="Start" – der interne Bezeichner des Tabs, wird standardmäßig auch als sichtbarer Tab-Titel angezeigt.

5. Ausgaben