Stack Navigator: Was ist das, Stack-Navigation in React Native

Was ist Stack Navigator?

Stack Navigator — einer der grundlegenden Navigatoren der React Navigation Bibliothek, der das Stapelmodell von Bildschirmen implementiert. Er bietet die für mobile Benutzer vertraute Navigation: Das Öffnen eines neuen Bildschirms wird von einer Slide-Rechts-Animation begleitet, und die «Zurück»-Taste oder die Wischgeste bringt den Benutzer zum vorherigen Bildschirm zurück. Stack Navigator unterstützt iOS und Android und verwendet native Plattformkomponenten für maximale Leistung.

React Navigation ist die beliebteste Navigationsbibliothek für React Native, die in 85% der Projekte installiert ist (laut npm-Daten, 2026). Stack Navigator ist Teil ihres Kerns und in zwei Implementierungen verfügbar: createNativeStackNavigator (nativ, empfohlen) und createStackNavigator (JavaScript, für komplexe benutzerdefinierte Animationen). Die native Version erschien in React Navigation v5 und wurde zum Standard in v6+.

Der Hauptvorteil von Stack Navigator — das natürliche Verhalten, das iOS- und Android-Benutzern vertraut ist. Auf iOS wird der Stapel visuell durch UINavigationController dargestellt, auf Android — durch FragmentManager mit Slide-Animation. Der Entwickler muss die Stapellogik nicht manuell implementieren — der Navigator verwaltet Bildschirmzustände, den Zurück-Stapel und Animationen automatisch.

Wie funktioniert die Stack-Navigation

Die Stack-Navigation basiert auf dem LIFO-Prinzip (Last In, First Out). Wenn ein Benutzer einen neuen Bildschirm öffnet, platziert der Navigator ihn oben auf dem Stapel. Bei Druck auf «Zurück» wird der obere Bildschirm entfernt und der Benutzer sieht den vorherigen. Der Stapel kann beliebig viele Bildschirme enthalten — die einzige Grenze ist der Gerätespeicher.

Jeder Bildschirm im Stapel behält seinen Zustand. Beim Zurückkehren zu einem vorherigen Bildschirm wird sein Zustand automatisch wiederhergestellt. Dies unterscheidet den Stapel von anderen Navigationstypen (Tab, Drawer), bei denen Bildschirme neu erstellt werden können. React Navigation verwaltet den Zustand über seinen eigenen Navigationskontextmechanismus.

Wischgeste zum Zurückgehen

Auf iOS unterstützt Stack Navigator eine Wischgeste vom linken Bildschirmrand zum Zurückgehen — dies ist das Standardverhalten von iOS, das Benutzer erwarten. Auf Android ist die Geste standardmäßig deaktiviert, kann aber über die Option gestureEnabled aktiviert werden. In Native Stack funktioniert die Geste nativ ohne Verzögerungen des JavaScript-Threads.

Native Stack vs JS Stack

React Navigation bietet zwei Arten von Stack Navigator: Native Stack (createNativeStackNavigator) und JS Stack (createStackNavigator). Der Hauptunterschied — wo die Animation ausgeführt wird. Native Stack verwendet native Animations-Treiber von iOS und Android, während JS Stack über den JavaScript-Thread von React Native läuft. Die Wahl zwischen ihnen hängt von den Leistungs- und Anpassungsanforderungen ab.

Native Stack wird für die meisten Projekte empfohlen. Er bietet flüssige 60 FPS-Animationen ohne Blockierung des JS-Threads, unterstützt die System-Wisch-zurück-Geste auf iOS und verwendet native Übergänge — slide auf iOS, fade auf Android. Allerdings ist Native Stack bei der Anpassung von Animationen eingeschränkt: Nur ein vordefinierter Satz von Übergängen ist verfügbar.

JS Stack gibt die vollständige Kontrolle über Animationen über cardStyleInterpolator. Der Entwickler kann jede Animation erstellen: Skalierung, Rotation, Parallaxe, benutzerdefinierte Kurven. Der Nachteil — Animationen laufen im JS-Thread, was bei komplexen Übergängen auf schwachen Geräten zu Bildaussetzern führen kann. Für 70% der Projekte ist Native Stack mehr als ausreichend.

// Native Stack — empfohlene Implementierung
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Installation und Einrichtung von Stack Navigator

Um mit Stack Navigator zu beginnen, müssen React Navigation und seine Abhängigkeiten installiert werden. Das minimale Set umfasst @react-navigation/native, @react-navigation/native-stack und react-native-screens. Nach der Installation wird die Anwendung in NavigationContainer eingewickelt — einen Kontext, der allen untergeordneten Komponenten den Navigationszustand bereitstellt.

# Installation der React Navigation Abhängigkeiten
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Für iOS — pod installieren
cd ios && pod install && cd ..

Nach der Installation wird Stack.Navigator mit bestimmten Bildschirmen erstellt, die in RootStackParamList definiert sind. Jeder Bildschirm wird über die component-Prop mit einer React-Komponente verbunden. Der Navigator kann Stamm oder in einem anderen Navigator (Tab, Drawer) verschachtelt sein. Für die Konfiguration werden screenOptions verwendet — entweder gemeinsam für alle Bildschirme oder individuell für jeden.

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

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'Start' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Parameter und Anpassung von Stack Navigator

Stack Navigator bietet viele Optionen zur Anpassung von Aussehen und Verhalten. Die Hauptparameter werden über screenOptions auf Navigator-Ebene oder options auf Screen-Ebene festgelegt. Der Entwickler kann die Kopfzeile, die Übergangsanimation, die Wischgeste, den Kartenstil und die Hintergrundabdunklung konfigurieren. Die Flexibilität der Einstellungen ermöglicht es, die Navigation an das Designsystem der Anwendung anzupassen.

Benutzerdefinierte Animationen über cardStyleInterpolator

Für JS Stack ermöglicht cardStyleInterpolator das Erstellen beliebiger Übergangsanimationen zwischen Bildschirmen. Dies ist ein leistungsstarkes Werkzeug zur Implementierung einzigartiger visueller Effekte: Skalierung, Rotation, Parallaxe, horizontaler Flip. Die Funktion erhält aktuelle Animationsfortschrittswerte (current, next) und gibt Stile für die zu animierenden Elemente zurück.

Navigationstypisierung mit TypeScript

Stack Navigator unterstützt die vollständige Typisierung über TypeScript. Dazu wird RootStackParamList definiert — ein Objekttyp, bei dem die Schlüssel Bildschirmnamen und die Werte Parametertypen sind. Nach der Typisierung erhalten navigation.navigate und route.params Autovervollständigung und Typprüfung. Dadurch werden Parameterübergabefehler zur Kompilierzeit ausgeschlossen.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// Typisierter Bildschirm
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>Produkt {id} — {category}</Text>
      <Button title="In den Warenkorb"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Fortgeschrittene Szenarien: Modale Fenster und Gruppen

Stack Navigator unterstützt die Gruppierung von Bildschirmen und modale Fenster. Gruppen (Screen Group) ermöglichen das Anwenden gemeinsamer Einstellungen auf mehrere Bildschirme ohne Duplizierung. Modale Fenster werden über stack presentation: 'modal' implementiert — der Bildschirm öffnet sich von unten mit Hintergrundabdunklung, wie ein Systemmodal auf iOS. Diese Option ist nur in Native Stack verfügbar.

Für komplexe Navigation kann Stack Navigator in einem Tab Navigator oder Drawer Navigator verschachtelt werden. Beispielsweise hat der Tab «Start» seinen eigenen Bildschirmstapel und der Tab «Profil» seinen eigenen. Diese Zusammensetzung von Navigatoren ist der Standardansatz für Produktionsanwendungen. Jeder Stapel ist isoliert: Der Zurück-Stapel innerhalb eines Tabs beeinflusst andere Tabs nicht.

// Verschachtelter Stapel im Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// Bildschirmgruppen mit gemeinsamen Optionen
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>