Die Produktliste mit FlatList laden

Mit sicher abgelegtem Integration-Token bauen wir jetzt das Herzstück der App: einen zentralen API-Client und den ersten Produktliste-Screen mit ECHTEN Magento-Daten, dargestellt mit FlatList.

api/magentoApi.js: ein zentraler API-Client

ALLE Magento-Aufrufe der App laufen über EINE Datei – GENAU dasselbe Prinzip wie im React-Web-Tutorial, nur mit process.env.EXPO_PUBLIC_... statt import.meta.env.VITE_...:

api/magentoApi.js

const BASE_URL = process.env.EXPO_PUBLIC_MAGENTO_BASE_URL;
const ACCESS_TOKEN = process.env.EXPO_PUBLIC_MAGENTO_ACCESS_TOKEN;

async function magentoFetch(path) {
  const response = await fetch(`${BASE_URL}${path}`, {
    headers: {
      Authorization: `Bearer ${ACCESS_TOKEN}`,
    },
  });

  if (!response.ok) {
    throw new Error(`Magento API Fehler: ${response.status}`);
  }

  return response.json();
}

export async function fetchProducts() {
  const data = await magentoFetch('/products?searchCriteria[pageSize]=12');
  return data;
}

screens/ProductListScreen.js: erste Version

screens/ProductListScreen.js

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

export default function ProductListScreen() {
  const [produkte, setProdukte] = useState([]);
  const [ladend, setLadend] = useState(true);

  useEffect(() => {
    async function laden() {
      const data = await fetchProducts();
      setProdukte(data.items);
      setLadend(false);
    }
    laden();
  }, []);

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

  return (
    <FlatList
      data={produkte}
      keyExtractor={(produkt) => produkt.sku}
      renderItem={({ item }) => (
        <View style={styles.zeile}>
          <Text style={styles.name}>{item.name}</Text>
          <Text>{item.price} €</Text>
        </View>
      )}
    />
  );
}

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

App.js

import ProductListScreen from './screens/ProductListScreen';

export default function App() {
  return <ProductListScreen />;
}

Starten Sie npx expo start neu (wegen der .env-Änderungen aus Kapitel 6) und öffnen Sie die App – Sie sollten jetzt eine EINFACHE, aber ECHTE, performant gerenderte Liste Ihrer Magento-Produktnamen und -Preise sehen.

Tipp: keyExtractor übernimmt bei FlatList dieselbe Rolle wie die key-Prop bei .map() im React-Web-Tutorial – React Native braucht einen eindeutigen Schlüssel pro Eintrag, um Listen effizient neu zu rendern. Die SKU eignet sich dafür GENAUSO gut wie im Web.