react-native
Lijstweergave

Eenvoudig voorbeeld

ListView - Een kerncomponent ontworpen voor een efficiënte weergave van verticaal schuivende lijsten met veranderende gegevens. De minimale API is om een ListView.DataSource te maken, deze te vullen met een eenvoudige reeks gegevensblobs en een ListView-component te instantiëren met die gegevensbron en een renderRow-callback die een blob uit de gegevensreeks haalt en een renderbare component retourneert.

Minimaal voorbeeld:

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 ondersteunt ook meer geavanceerde functies, waaronder secties met plakkerige sectiekoppen, kop- en voettekstondersteuning, callbacks bij het bereiken van het einde van de beschikbare gegevens (onEndReached) en op de set rijen die zichtbaar zijn in de viewport van het apparaat (onChangeVisibleRows), en verschillende prestatie-optimalisaties.

Er zijn een paar prestatiebewerkingen ontworpen om ListView soepel te laten scrollen terwijl potentieel zeer grote (of conceptueel oneindige) gegevenssets dynamisch worden geladen:

• Alleen gewijzigde rijen opnieuw renderen - de rowHasChanged-functie die aan de gegevensbron is verstrekt, geeft de ListView aan of deze een rij opnieuw moet renderen omdat de brongegevens zijn gewijzigd - zie ListViewDataSource voor meer informatie.
• Snelheidslimiet rijrendering - Standaard wordt slechts één rij per event-lus weergegeven (aanpasbaar met de pageSize prop). Dit splitst het werk op in kleinere stukjes om de kans te verminderen dat frames worden neergezet terwijl rijen worden weergegeven.