Navigation zum Detail-Screen mit React Navigation

Die Produktliste steht – jetzt verbinden wir sie mit einem zweiten Screen: dem Produktdetail-Screen, den wir ab Kapitel 10 mit allen Produktdaten füllen.

App.js

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ProductList"
          component={ProductListScreen}
          options={{ title: 'Produkte' }}
        />
        <Stack.Screen
          name="ProductDetail"
          component={ProductDetailScreen}
          options={{ title: 'Produktdetails' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Anders als bei React Router (URL-basiert mit :sku-Parameter im Pfad) übergibt React Navigation Parameter über ein params-Objekt beim Navigations-Aufruf – wir übergeben die SKU dort statt in der URL.

components/ProductCard.js

import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function ProductCard({ produkt }) {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      style={styles.zeile}
      onPress={() => navigation.navigate('ProductDetail', { sku: produkt.sku })}
    >
      <Text style={styles.name}>{produkt.name}</Text>
      <Text>{produkt.price} €</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  zeile: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' },
  name: { fontWeight: 'bold', marginBottom: 4 },
});

useNavigation() gibt Zugriff auf das Navigations-Objekt, OHNE es als Prop durchreichen zu müssen – nützlich für Komponenten wie ProductCard, die TIEFER als der eigentliche Screen verschachtelt sind.

ProductListScreen.js: ProductCard nutzen

screens/ProductListScreen.js

import { useEffect, useState } from 'react';
import { FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { fetchProducts } from '../api/magentoApi';
import ProductCard from '../components/ProductCard';

export default function ProductListScreen() {
  const [produkte, setProdukte] = useState([]);
  const [seite, setSeite] = useState(1);
  const [seitenAnzahl, setSeitenAnzahl] = useState(1);
  const [ladend, setLadend] = useState(true);
  const [ladeMehr, setLadeMehr] = useState(false);

  useEffect(() => {
    async function ersteSeiteLaden() {
      const ergebnis = await fetchProducts({ seite: 1 });
      setProdukte(ergebnis.produkte);
      setSeitenAnzahl(ergebnis.seitenAnzahl);
      setSeite(1);
      setLadend(false);
    }
    ersteSeiteLaden();
  }, []);

  async function naechsteSeiteLaden() {
    if (ladeMehr || seite >= seitenAnzahl) {
      return;
    }
    setLadeMehr(true);
    const naechsteSeite = seite + 1;
    const ergebnis = await fetchProducts({ seite: naechsteSeite });
    setProdukte((bisherige) => [...bisherige, ...ergebnis.produkte]);
    setSeite(naechsteSeite);
    setLadeMehr(false);
  }

  if (ladend) {
    return <ActivityIndicator style={styles.zentriert} size="large" />;
  }

  return (
    <FlatList
      data={produkte}
      keyExtractor={(produkt) => produkt.sku}
      renderItem={({ item }) => <ProductCard produkt={item} />}
      onEndReached={naechsteSeiteLaden}
      onEndReachedThreshold={0.5}
      ListFooterComponent={ladeMehr ? <ActivityIndicator /> : null}
    />
  );
}

const styles = StyleSheet.create({
  zentriert: { flex: 1, justifyContent: 'center' },
});

screens/ProductDetailScreen.js: vorläufiges Grundgerüst

screens/ProductDetailScreen.js

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

export default function ProductDetailScreen({ route }) {
  const { sku } = route.params;

  return (
    <View style={{ padding: 16 }}>
      <Text>Details für SKU: {sku}</Text>
    </View>
  );
}

route.params ist React Navigations Gegenstück zu useParams() aus dem React-Web-Tutorial – die beim navigation.navigate(...)-Aufruf übergebenen Werte landen hier.

Tipp: Tippen Sie jetzt in der laufenden App auf ein Produkt – React Navigation sollte zum Detail-Screen wechseln (inklusive der nativen Zurück-Geste/des Zurück-Pfeils) und die noch simple Detailseite die SKU korrekt anzeigen. Genau dieser Datenfluss ist die Grundlage für Kapitel 10.

Navigation zum Detail-Screen mit React Navigation

Navigation zum Detail-Screen mit React Navigation

React Navigation in App.js einrichten

components/ProductCard.js: antippbare Produktkarte

ProductListScreen.js: ProductCard nutzen

screens/ProductDetailScreen.js: vorläufiges Grundgerüst