FlatList-Komponente in React Native

FlatList ist die performance-optimierte, empfohlene Standardkomponente zum Anzeigen langer Listen in React Native – der direkte Nachfolger von ListView.

1. Beschreibung

Anders als ScrollView rendert FlatList zu jedem Zeitpunkt nur die gerade sichtbaren (bzw. bald sichtbaren) Einträge – nicht die komplette Liste sofort. Das nennt man "Virtualisierung" und macht auch Listen mit Tausenden Einträgen performant scrollbar.

2. Kurzes Beispiel

<FlatList
  data={['Apfel', 'Birne', 'Kirsche']}
  keyExtractor={(item) => item}
  renderItem={({ item }) => <Text>{item}</Text>}
/>

3. Komplettes Projekt

npx create-expo-app flatlist-demo
cd flatlist-demo

App.js

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

const AUFGABEN = Array.from({ length: 50 }, (_, i) => ({
  id: String(i + 1),
  titel: `Aufgabe Nummer ${i + 1}`,
}));

export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
        data={AUFGABEN}
        keyExtractor={(item) => item.id}
        renderItem={({ item, index }) => (
          <View style={styles.zeile}>
            <Text style={styles.nummer}>{index + 1}.</Text>
            <Text>{item.titel}</Text>
          </View>
        )}
        ItemSeparatorComponent={() => <View style={styles.trenner} />}
        ListHeaderComponent={<Text style={styles.header}>50 Aufgaben</Text>}
        ListEmptyComponent={<Text>Keine Aufgaben.</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60 },
  header: { fontSize: 20, fontWeight: 'bold', padding: 16 },
  zeile: { flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 16 },
  nummer: { width: 32, color: '#6b7280' },
  trenner: { height: 1, backgroundColor: '#e5e7eb', marginHorizontal: 16 },
});

4. Erklärung

data – das Array mit den Rohdaten.
keyExtractor – erzeugt aus jedem Element einen eindeutigen String-Schlüssel; entscheidend für korrektes Neuzeichnen bei Änderungen.
renderItem – bekommt ein Objekt {{ item, index }} und gibt die anzuzeigende JSX zurück.
ItemSeparatorComponent – wird zwischen (nicht vor oder nach) je zwei Einträgen gerendert.
ListHeaderComponent/ListEmptyComponent – Kopfzeile bzw. Anzeige bei leerem data-Array.

5. Ausgaben

Ausgabe

Eine Überschrift "50 Aufgaben", darunter eine scrollbare, durchnummerierte Liste ("1. Aufgabe Nummer 1" bis "50. Aufgabe Nummer 50"), jede Zeile durch eine dünne graue Linie von der nächsten getrennt.

Tipp: Beim Scrollen durch eine sehr lange FlatList werden weit entfernte Elemente aus dem Speicher entfernt und bei Bedarf neu erzeugt – deshalb sollten teure Berechnungen in renderItem möglichst vermieden oder mit useMemo abgesichert werden (siehe React-Einsteiger-Tutorial, Kapitel useMemo/useCallback).