Werte zwischen Screens übergeben in React Native

Bei mehreren Screens (React Navigation, siehe die Tab-/Drawer-Kapitel) müssen oft Daten von einem Screen zum nächsten wandern – z.B. ein angetipptes Listenelement, dessen Details ein Detail-Screen anzeigen soll. React Navigation löst das über route.params.

1. Beschreibung

Beim Navigieren übergibt navigation.navigate('ZielScreen', { ... }) ein Objekt als zweites Argument. Der Ziel-Screen liest diese Werte über die route-Prop aus (route.params) – kein globaler State, kein Context nötig für diesen einfachen Fall.

2. Kurzes Beispiel

// Absenden:
navigation.navigate('Detail', { produktId: 42, name: 'Rucksack' });

// Empfangen im Detail-Screen:
function DetailScreen({ route }) {
  const { produktId, name } = route.params;
  return <Text>{name} (#{produktId})</Text>;
}

3. Komplettes Projekt: Produktliste mit Detail-Screen

npx create-expo-app screen-params-demo
cd screen-params-demo
npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

screens/ProduktlisteScreen.js

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

const PRODUKTE = [
  { id: '1', name: 'Rucksack 30L', preis: 59.5, beschreibung: 'Wasserdichter Wanderrucksack.' },
  { id: '2', name: 'Regenjacke', preis: 74.0, beschreibung: 'Leichte Jacke für jedes Wetter.' },
  { id: '3', name: 'Wanderschuhe', preis: 89.99, beschreibung: 'Robuste Sohle, Knöchelschutz.' },
];

function ProduktlisteScreen({ navigation }) {
  return (
    <FlatList
      contentContainerStyle={styles.liste}
      data={PRODUKTE}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity
          style={styles.zeile}
          onPress={() => navigation.navigate('Detail', item)}
        >
          <Text style={styles.name}>{item.name}</Text>
          <Text style={styles.preis}>{item.preis.toFixed(2)} €</Text>
        </TouchableOpacity>
      )}
    />
  );
}

const styles = StyleSheet.create({
  liste: { padding: 16 },
  zeile: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  name: { fontSize: 16 },
  preis: { fontSize: 16, fontWeight: 'bold' },
});

export default ProduktlisteScreen;

screens/DetailScreen.js

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

function DetailScreen({ route }) {
  const { name, preis, beschreibung } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.preis}>{preis.toFixed(2)} €</Text>
      <Text style={styles.beschreibung}>{beschreibung}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 24 },
  name: { fontSize: 24, fontWeight: 'bold' },
  preis: { fontSize: 18, color: '#2563eb', marginVertical: 8 },
  beschreibung: { fontSize: 16, color: '#374151' },
});

export default DetailScreen;

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ProduktlisteScreen from './screens/ProduktlisteScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Produkte" component={ProduktlisteScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. Erklärung

navigation.navigate('Detail', item) – das GESAMTE Produkt-Objekt wird als Params-Objekt übergeben, kein manuelles Feld-für-Feld-Zusammenbauen nötig.
route.params ist im Ziel-Screen NUR beim Navigieren MIT Params gesetzt – ruft man den Screen anders auf (z.B. direkter Tab-Wechsel), kann route.params undefined sein; in echten Apps sollte man das mit einem Fallback abfangen.
Übergebene Werte sind eine reine EINMALIGE Momentaufnahme beim Navigieren – ändert sich das Original-Produkt später in der Liste, aktualisiert sich der bereits geöffnete Detail-Screen NICHT automatisch (anders als bei geteiltem Context-State).
Für tiefer verschachtelte oder wirklich globale Daten (z.B. eingeloggter Benutzer) ist React Context oder eine State-Management-Bibliothek besser geeignet als Navigation-Params, die für BILDSCHIRM-lokale Übergaben gedacht sind.

5. Ausgaben

Ausgabe

Eine Liste mit drei Produkten (Name links, Preis rechts). Antippen von "Wanderschuhe" öffnet den Detail-Screen mit großem Titel "Wanderschuhe", blauem Preis "89.99 €" und der Beschreibung "Robuste Sohle, Knöchelschutz." darunter; ein automatischer Zurück-Pfeil oben links führt zur Liste zurück.