react-native
ListView

Exemple simple

ListView - Composant central conçu pour un affichage efficace des listes de données changeantes défilant verticalement. L'API minimale consiste à créer un ListView.DataSource, à le remplir avec un simple tableau de blobs de données et à instancier un composant ListView avec cette source de données et un rappel renderRow qui prend un blob du tableau de données et renvoie un composant rendu.

Exemple minimal:

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 prend également en charge des fonctionnalités plus avancées, notamment des sections avec des en-têtes de sections, des en-têtes et des pieds de page, des rappels à la fin des données disponibles (onEndReached) et l'ensemble des lignes visibles dans onport change plusieurs optimisations de performances.

Il y a quelques opérations de performance conçues pour que ListView défile en douceur tout en chargeant dynamiquement des ensembles de données potentiellement très volumineux (ou conceptuellement infinis):

• Ne restituez que les lignes modifiées - la fonction rowHasChanged fournie à la source de données indique à ListView si elle doit redéfinir une ligne car les données source ont été modifiées - voir ListViewDataSource pour plus de détails.
• Rendu de ligne limité par le débit - Par défaut, une seule ligne est rendue par boucle d'événement (personnalisable avec le prop de pageSize). Cela divise le travail en morceaux plus petits afin de réduire les risques de suppression d'images lors du rendu des lignes.