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

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

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 à partir de la source de données, comment puis-je le faire? Ai-je besoin de toujours faire appel à cloneWithRows avec mise à jour de tableau?

InformationsquelleAutor thecodejack | 2015-03-30
  1. 64

    Oui, appelez cloneWithRows(...)

    La Réagir Natif de la documentation ne permet pas de couvrir la ListViewDataSource objet, de sorte qu'il peut être utile de lire les commentaires dans le le code source pour voir comment cela fonctionne.

    Quelques notes qui peuvent être utiles:

    • cloneWithRows(data) est un peu trompeuse nommé parce que n'est pas seulement de créer un clone de données comme le nom le suggère.

    • Au lieu de cela, il tente de comparer la nouvelle data lignes avec les lignes existantes (le cas échéant) dans la source de données, et en déduit qu'il y a de nouvelles lignes à insérer, ou les lignes existantes qui doivent être remplacés ou supprimés.

    • Les commentaires du code source noter que les données de la source de données est immuable, de par sa conception, donc la bonne façon de changer de spécifier une mise à jour de la source de données, c'est à dire appel cloneWithRows(...).

    Il peut sembler peu intuitive de passer l'ensemble de la liste juste pour changer un peu de lignes, mais il ya un couple de raisons pour lesquelles cela a du sens:

    • Tout d'abord, il s'accorde avec Réagissent ensemble basée sur les flux de l'architecture où l'accent est mis sur la définition des états et permettant à des composants de comprendre comment muter eux-mêmes afin de refléter le nouvel état (pensez à la façon dont this.props ou this.state œuvres). Vous êtes libre de modifier le tableau de données, cependant, vous comme à l'extérieur de la ListView composant, mais une fois que vous êtes prêt à mettre à jour le composant, c'est un décent flux approche pour passer la totalité de l'état dans le volet de sorte qu'il peut mettre à jour lui-même.

    • Deuxième, c'est décemment efficace. La liste ne la lourde ligne de différenciation dans le Javascript avant il commence le processus de rendu, puis rend une ligne à la fois (vous pouvez régler ce) lors de la génération du cycle, pour réduire le cadre de gouttes.

    • Troisième, rien ici n'exclut pas la possibilité de soutenir des méthodes comme .addRow(..) dans l'avenir. Le point est que la mise en œuvre actuelle n'est pas un mauvais départ, car il fournit un état de l'interface qui permet aux développeurs de ne pas vous soucier de la façon dont le composant list mute entre les états.

    • Merci pour l'explication! Je suis très troublé par le nom. Pourriez-vous être plus précis sur la façon de mettre à jour certaines informations dans une rangée?
    • Quid des listes avec de 10 000 de lignes? Ne pas la performance de bloquer le thread d'INTERFACE utilisateur?
    • Qui défile 10 000 lignes en une seule fois?
    InformationsquelleAutor tohster
  2. 8

    Si vous regardez l'étendue des Films exemple de la manière de Réagir Natif tutoriel, il met en œuvre la recherche qui récupère les nouveaux films à partir d'un API à distance. Cela signifie que chaque recherche permettra d'actualiser la banque de données, de manière efficace d'ajouter ou de supprimer des éléments. Le lieu exact de ce qui se passe c'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

    De sorte qu'il ressemble à votre façon est la méthode recommandée.

    • oh oui..regarde comme c'est le seul moyen!!..Mais ensuite, il devrait être d'une certaine façon..coz comme ça je pourrais avoir besoin pour gérer l'état comme la position de défilement etc...
    • Bon point, mais vous pourriez être en mesure de le faire manuellement par l'obtention de la liste de la ScrollView la position de défilement, puis la configuration d'après la banque de données des mises à jour. Je suis d'accord que ce serait un peu maladroit, et il serait mieux si vous pouvez le faire automatiquement. À moins que quelqu'un sur la RN équipe peut vous apporter une meilleure réponse que je voudrais suggérer l'ouverture d'un problème sur le Github tracker
    • En fait, pour être juste, il semble que ce est un processus manuel, même sur entièrement natif iOS: stackoverflow.com/a/18855615/125680
    • maintenant, il fait plus de sens..de toute façon je préfère la construction d'une enveloppe de plus de cette, de sorte que RN est beaucoup plus puissant, avec ce genre de fonctionnalité..je vais avoir une amélioration de la suggestion là... Permet de voir comment ils réagissent à elle...
    InformationsquelleAutor Colin Ramsay