react-native
Listenansicht

Einfaches Beispiel

ListView - Eine Kernkomponente, die für die effiziente Anzeige von vertikal abrollenden Listen mit sich ändernden Daten entwickelt wurde. Die minimale API besteht darin, eine ListView.DataSource zu erstellen, sie mit einem einfachen Array von Datenblobs zu füllen und eine ListView-Komponente mit dieser Datenquelle und einem RenderRow-Callback zu instantiieren, der ein Blob aus dem Datenarray entnimmt und eine darstellbare Komponente zurückgibt.

Minimales Beispiel:

getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
},

ListView unterstützt auch erweiterte Funktionen, einschließlich Abschnitten mit ständigen Abschnittsheatern, Unterstützung für Kopf- und Fußzeilen, Rückrufe beim Erreichen der verfügbaren Daten (onEndReached) und bei den Zeilen, die in der Änderung des Gerätesichtfensters (onChangeVisibleRows) sichtbar sind mehrere Leistungsoptimierungen.

Es gibt einige Leistungsoperationen, mit denen ListView reibungslos verschoben werden kann, während potenziell sehr große (oder konzeptionell unendliche) Datensätze dynamisch geladen werden:

• Nur geänderte Zeilen werden erneut gerendert. Die der Datenquelle bereitgestellte Funktion rowHasChanged teilt der ListView mit, ob eine Zeile erneut gerendert werden muss, da sich die Quelldaten geändert haben. Weitere Informationen finden Sie unter ListViewDataSource.
• Zeilenbegrenztes Rendern von Zeilen - Standardmäßig wird nur eine Zeile pro Ereignisschleife gerendert (anpassbar mit der PageSize-Eigenschaft). Dadurch wird die Arbeit in kleinere Abschnitte aufgeteilt, um die Wahrscheinlichkeit zu reduzieren, dass Bilder beim Rendern von Zeilen fallen.