react-native
Listvy

Enkelt exempel

ListView - En kärnkomponent som är utformad för effektiv visning av vertikalt rullande listor med ändrade data. Det minimala API: et är att skapa en ListView.DataSource, fylla den med en enkel uppsättning av dataklumpar och initiera en ListView-komponent med den datakällan och en renderRow-återuppringning som tar en klump från dataarrayen och returnerar en renderbar komponent.

Minsta exempel:

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 stöder också mer avancerade funktioner, inklusive sektioner med klibbiga sektionsrubriker, sidhuvud- och sidfotstöd, återuppringningar för att nå slutet av tillgängliga data (onEndReached) och på uppsättningen rader som är synliga i enhetsvyportändring (onChangeVisibleRows) och flera prestandaoptimeringar.

Det finns några prestandaoperationer som är utformade för att ListView ska bläddra smidigt medan du dynamiskt laddar potentiellt mycket stora (eller konceptuellt oändliga) datamängder:

• Endast återgivna ändrade rader - funktionen rowHasChanged som tillhandahålls till datakällan berättar ListView om den måste återge en rad eftersom källdata har ändrats - se ListViewDataSource för mer information.
• Hastighetsbegränsad rad-rendering - Som standard återges bara en rad per händelsslinga (anpassningsbar med sidstorleksstödet). Detta delar upp arbetet i mindre bitar för att minska risken för att tappa ramar medan du gör rader.