Comment mettre en surbrillance et sélectionner plusieurs éléments dans un composant FlatList - React Native

Manipulation d'éléments dans FlatList

Photo par Max Nelson sur Unsplash

Vous avez probablement entendu parler d'un composant Flatlist si vous travaillez dans React native et que vous gérez des listes de diverses données et informations client à partir de l'API ou des champs de formulaire. Fondamentalement, Flatlist est un composant essentiel conçu pour un affichage efficace des listes de données changeantes qui défilent verticalement. C'est un composant qui a vu le jour dans React natif après la version 0.43. Il remplaçait le composant ListView et permettait aux développeurs de gérer plus facilement les listes.

Qu'est-ce que Flatlist? Et comment pouvons-nous l'utiliser pour afficher des listes dynamiques ou statiques?

FlatList est un composant simple introduit pour supprimer les limitations du composant ListView. Les accessoires de base requis pour gérer une liste plate sont data et renderItem. Pour des raisons de simplicité, les données sont simplement un tableau simple, tandis que renderItem rend ce tableau de données et fournit au développeur les métadonnées telles que l'index, etc.

  {item.key} 
 />

Utilisation de FlatList pour afficher une liste d'éléments

Si vous êtes nouveau dans React Native, je vous recommanderais de lire cet article et d'essayer d'apprendre la structure de base. Revenez ensuite pour mieux comprendre FlatList.

Voici le guide étape par étape sur l'utilisation de FlatList pour extraire les données d'une API factice et l'utiliser pour afficher une liste d'éléments avec une image.

La première étape consiste à importer le composant Flatlist à partir de la bibliothèque react-native.

importer {FlatList} de "react-native";

Maintenant que nous avons importé le composant, il est temps de l’utiliser dans la fonction de rendu.

 this.renderItem (item)}
  keyExtractor = {item => item.id.toString ()}
/>

Points à considérer

  1. data prop prend les données de {this.state.dataSource} et nous fournit un tableau d'objets.
  2. ItemSeparatorComponent aide à séparer les éléments de la liste lorsqu'ils sont affichés dans une liste.
  3. La méthode renderItem est la partie la plus importante d'une FlatList. Il restitue les données de la matrice de manière à ce qu’elles puissent être développées conformément aux exigences en matière de données et de conception.
  4. Comme nous traitons ici d'un tableau, keyExtractor prop fournit une clé unique pour gérer l'élément de liste séparément, selon les besoins.
  5. Il y a encore un accessoire essentiel appelé extraData que je décrirai plus tard dans cet article.

Vous avez maintenant une compréhension de base du fonctionnement d’une liste plate. Il est temps de mettre en œuvre ces connaissances et cette logique dans le code. Comme nous utilisons les données de l’API, j’ajouterais un indicateur pour afficher un chargeur jusqu’au chargement des données dans le back-end. Il est temps de récupérer les données et de les restituer dans une liste. Si vous souhaitez en savoir plus sur l'extraction des données de l'API, vous pouvez lire cet article.

Liste rendue sans ItemSeparator

Jusqu'à présent, nous avons géré les données et la méthode renderItem. Il est maintenant temps d’explorer les méthodes restantes.

FlatListItemSeparator = () =>