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 :
-
FlatList permet
d’afficher une liste simple ; FlatList
-
SectionList permet
d’afficher une liste par section, comportant chacune un
titre notamment. SectionList
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 ...