web-dev-qa-db-fra.com

Comment ajouter / supprimer un élément dans ListView?

Nous pouvons créer une source de données pour ListView comme ceci

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

Mais si je veux ajouter des éléments ou supprimer des éléments de la source de données, comment puis-je faire cela? Dois-je toujours appeler cloneWithRows avec un tableau mis à jour?

react-nativereact-native-listview
30
thecodejack

Oui, appelez cloneWithRows(...)

La documentation React Native ne couvre pas l'objet ListViewDataSource, il peut donc être utile de lire les commentaires dans le code source pour voir comment cela travaux.

Quelques notes qui peuvent être utiles:

  • cloneWithRows(data) est un peu trompeuse car elle ne crée pas simplement un clone des données comme son nom l'indique.

  • Au lieu de cela, il essaie de comparer les nouvelles lignes data avec les lignes existantes (le cas échéant) dans le dataSource et détermine s'il y a de nouvelles lignes à insérer ou des lignes existantes qui doivent être remplacées ou supprimées.

  • Les commentaires sur le code source notent que les données de la source de données sont immuables par conception, donc la bonne façon de la modifier est de spécifier une source de données mise à jour, c'est-à-dire d'appeler cloneWithRows(...).

Il peut sembler peu intuitif de passer la liste entière juste pour changer quelques lignes, mais il y a quelques raisons pour lesquelles cela a du sens:

  • Tout d'abord, il est compatible avec l'ensemble de React architecture basée sur les flux où l'accent est mis sur la définition d'états et permettant aux composants de comprendre comment se muter pour refléter le nouvel état (pensez à comment this.props ou this.state fonctionne). Vous êtes libre de modifier le tableau de données comme vous le souhaitez en dehors du composant ListView, mais une fois que vous êtes prêt à mettre à jour le composant, c'est une approche de flux décent pour passer l'état entier dans le composant afin qu'il puisse se mettre à jour lui-même.

  • Deuxièmement, c'est décemment efficace. Le ListView effectue la différenciation des lignes dans le Javascript avant de démarrer le processus de rendu, puis de rendre une ligne à la fois (vous pouvez ajustez ceci ) pendant le cycle de rendu, pour réduire les pertes d'images.

  • Troisièmement, rien ici n'exclut la possibilité de prendre en charge à l'avenir des méthodes telles que .addRow(..). Le fait est que l'implémentation actuelle n'est pas un mauvais départ, car elle fournit une interface basée sur l'état qui permet aux développeurs de ne pas se soucier de la façon dont le composant de liste mute entre les états.

64
tohster

Si vous regardez l'exemple de films développé dans le didacticiel React Native, il implémente une recherche qui récupère les nouveaux films à partir d'une API distante. Cela signifie que chaque recherche actualisera le magasin de données, ajoutant ou supprimant efficacement des éléments L'endroit exact où cela se produit est ici:

getDataSource: function(movies: Array<any>): ListView.DataSource {
    return this.state.dataSource.cloneWithRows(movies);
}

https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js#L209

Il semble donc que votre chemin soit la méthode recommandée.

8
Colin Ramsay