Back to videos

Comment utiliser les composants Flatlist et Sectionlist - Tuto React Native TypeScript

Comment utiliser les composants Flatlist et SectionList en React Native avec TypeScript ?

Dans cette vidéo nous allons explorer les listes ReactNative de fond en comble en faisant un début d'application de musique à l'aide des données chargées depuis l'API Spotify.

Vous apprendrez à :

  • lister et à faire scroller des éléments horizontalement et verticalement à l'aide des Flatlist

  • afficher les éléments sur plusieurs colonnes

  • ajouter un emptyState, un header, un footer à votre liste

  • pull to refetch pour raffraichir les données

  • détecter quand l'utilisateur scroll jusqu'à un certain seuil pour charger plus de données

  • combiner SectionList et Flatlist pour combiner scroll horizontal et vertical

Les liens utiles :

Le code source de démarrage (starter pack)

https://github.com/wass08/react-native-lists-tutorial-starter

Le code source final

https://github.com/wass08/react-native-lists-tutorial-final

La documentation des Flatlists

https://reactnative.dev/docs/flatlist

La documentation des Sectionlists

https://reactnative.dev/docs/sectionlist

#reactnative #flatlist #sectionlist #TypeScript

Need help with this tutorial? Join our Discord community!