Affichage de listes Listes

À présent que nous avons su gérer la navigation au sein de notre application, passons à la deuxième notion à aborder : l’affichage de listes. Il est fréquent de vouloir afficher des listes dans une application, qu’il s’agisse d’une liste de contacts, d’articles ou de tâches. Tellement fréquent que React Native (et avant lui les plateformes iOS et Android) met à disposition le moyen de les gérer facilement, et surtout efficacement.

Efficacement dans le sens où pour l’affichage de listes comportant de nombreux éléments, il n’est pas nécessaire de générer le rendu pour tous les éléments, seuls ceux visibles importent. De plus, une fois que l’on fait défiler la liste vers le bas, les éléments du haut, devenus invisibles, peuvent probablement voir leur rendu libéré de la mémoire. Ce sont toutes ces optimisations que nous n’aurons pas à gérer nous-mêmes.

Pour créer une liste, deux composants s’offrent à nous :

Pour notre exemple, nous allons utiliser une FlatList. La première chose à faire est de définir un composant que l’on souhaite afficher pour chaque élément de la liste, en l’occurrence...