ListView war React Natives ursprüngliche Listen-Komponente – heute als "deprecated" (veraltet) markiert und aus React Native selbst entfernt. Sie taucht in dieser Referenz trotzdem auf, weil Sie ihr in älterem Code/älteren Tutorials begegnen könnten und wissen sollten, wie man sie ERSETZT.

1. Beschreibung

ListView benötigte eine separate ListView.DataSource-Hilfsklasse und rendert im Gegensatz zu modernen Alternativen ALLE Elemente sofort, ohne Virtualisierung – bei langen Listen ein Performance-Problem. Seit React Native 0.60 ist sie komplett entfernt; der offizielle Ersatz ist FlatList (eigenes Thema in dieser Referenz).

2. Kurzes Beispiel: der historische Ansatz

// So sah es FRÜHER aus (nicht mehr lauffähig in aktuellem React Native):
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
const dataSource = ds.cloneWithRows(['Apfel', 'Birne', 'Kirsche']);

<ListView
  dataSource={dataSource}
  renderRow={(rowData) => <Text>{rowData}</Text>}
/>

3. Komplettes Projekt: die moderne Migration

npx create-expo-app listview-migration-demo
cd listview-migration-demo

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

const FRUECHTE = ['Apfel', 'Birne', 'Kirsche', 'Traube', 'Mango'];

export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
        data={FRUECHTE}
        keyExtractor={(item) => item}
        renderItem={({ item }) => (
          <Text style={styles.row}>{item}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  row: { fontSize: 18, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
});

4. Erklärung

• ListView.DataSource gab es, weil ListView selbst nicht wusste, wie es effizient erkennt, welche Zeilen sich geändert haben – FlatList löst das eingebaut über die key-basierte Diff-Logik von React selbst.
• renderRow (ListView) entspricht renderItem (FlatList) – beide bekommen die aktuellen Daten und geben JSX zurück.
• FlatList rendert nur sichtbare Zeilen ("virtualisiert"), ListView rendert IMMER die komplette Liste sofort.

5. Ausgaben