Comment charger des données dynamiquement avec une pagination personnalisée dans React Native

Jan 24, 2024

La pagination personnalisée avec chargement dynamique des données peut améliorer les performances et l'expérience utilisateur globale de votre application.

La pagination fait référence au système de division de grandes quantités de données en blocs ou pages plus petits et plus faciles à gérer pour améliorer les performances et la convivialité. La pagination personnalisée, si elle est correctement mise en œuvre, peut offrir une meilleure expérience utilisateur. Apprenez à créer une solution de pagination personnalisée dans React Native qui vous permet de charger des données de manière dynamique.

​​​​​​Avec la pagination personnalisée, les développeurs peuvent créer un mécanisme de pagination qui répond aux exigences spécifiques de leur application. La pagination personnalisée peut impliquer la conception d'une interface utilisateur unique pour naviguer entre les pages, la mise en œuvre d'algorithmes pour extraire des données d'une base de données ou d'une API, ou l'intégration de fonctionnalités telles que le défilement infini ou le chargement différé.

Créer un système de pagination personnalisé pour vos applications mobiles React Native peut offrir certains avantages :

Lorsque votre application React Native ne charge que les données nécessaires dont elle a besoin à ce moment-là, on parle alors de chargement dynamique. Pour mettre en œuvre le chargement dynamique avec une pagination personnalisée, vous pouvez suivre ces étapes générales :

La première étape de la mise en œuvre de la pagination personnalisée dans React Native consiste à configurer votre source de données. Cela implique généralement de récupérer des données à partir d'une API ou d'une base de données et de les stocker dans une variable d'état. Considérez une simple API REST qui renvoie une liste de livres.

Voici un exemple de ce à quoi la réponse de l'API pourrait ressembler :

Pour récupérer ces données dans notre application React Native, nous pouvons utiliser lealler chercherfonction, qui renvoie unPromessequi se résout avec la réponse de l'API REST.

Commençons par créer une fonction qui récupérera les données de l'API et mettra à jour l'état avec les données nouvellement reçues. Cette fonction décidera quoi rendre sur l'écran de l'application React Native.

Nous définirons cette fonction comme une fonction asynchrone qui prend un paramètre de page et renvoie une Promise qui se résout avec les données récupérées.

Dans le bloc de code ci-dessus, lerécupérer des livresla fonction prend unpage paramètre et renvoie une Promise qui se résout avec les données de cette page. Ici leTAILLE DE LA PAGEconstante est utilisée pour limiter le nombre de livres récupérés par page.

Avec la fonction de pagination personnalisée définie, vous pouvez maintenant l'utiliser pour implémenter le chargement dynamique dans l'application. Pour ce faire, utilisez leListe platecomposant, qui est un composant hautes performances pour le rendu de grandes listes de données dans React Native.

Tout d'abord, configurez leListe platecomposant avec un état initial :

Ce code configure le composant FlatList avec deux éléments d'état, à savoirlivresetpage actuelle . Nous utilisons leutiliserEffet()crochet pour récupérer la page initiale de données lors de la première exécution de notre application.

Ensuite, nous définissons unélément de rendufonction qui prend un élément de lalivrestableau et retourne unVoircontenant le titre et l'auteur du livre.

Enfin, nous avons passé lelivrestableau à ladonnéesaccessoire de laListe plate, avec notreélément de rendufonction etkeyExtractor.

Nous devons maintenant nous assurer que notre Flatlist peut détecter lorsqu'un utilisateur défile jusqu'à la fin de la liste. À ce stade, il doit procéder à la récupération et au chargement des nouvelles données et les rendre.

Pour ce faire, nous utiliserons leonEndReachedaccessoire fourni auListe plate , qui est un rappel appelé lorsque l'utilisateur fait défiler jusqu'à la fin de la liste. Nous devrions également mettre à jour notrepage actuelleétat pour garder une trace de la page sur laquelle nous sommes actuellement.

Voici le code mis à jour implémentant tout cela :

Ici, nous avons ajouté deux nouveaux états appelésest en cours de chargementetonEndReachedThreshold.est en cours de chargementgarde une trace de si nous récupérons actuellement des données, etonEndReachedThresholdtire leonEndReachedrappel lorsque l'utilisateur a fait défiler jusqu'à 10 % de la fin de la liste.

Nous avons créé une nouvelle fonction appeléechercherPlusqui tourne quandonEndReached est congédié. Il vérifie si nous chargeons déjà des données, et si ce n'est pas le cas, il récupère la page de données suivante et met à jour notre liste.

Enfin, nous avons ajouté les nouveaux accessoires nécessaires à notreListe plate composant. LeListe platechargera désormais dynamiquement les données lorsque l'utilisateur défilera jusqu'à la fin de la liste.

Vous avez appris à charger dynamiquement des données dans React Native avec votre propre système de pagination personnalisé. Cette méthode vous offre plus de flexibilité et de contrôle lorsque vous traitez de grandes quantités de données dans votre application. N'oubliez pas d'adapter votre pagination au style et aux besoins de votre application. Vous pouvez le personnaliser encore plus pour obtenir l'apparence et la fonctionnalité souhaitées. Dans l'ensemble, cela vous aiderait certainement à optimiser les performances de votre application.

Noble Okafor est un ingénieur logiciel qualifié avec plus de 3 ans d'expérience dans le domaine de la programmation. Il est passionné par la création de solutions logicielles JavaScript, natives et multiplateformes mobiles et Web optimisées. Il s'efforce de documenter ses connaissances et ses leçons à travers ses articles techniques avec plus d'un an d'expérience dans l'écriture. L'objectif principal de ces articles est de simplifier les complexités autour des sujets de génie logiciel.