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

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.

Comprendre la pagination personnalisée

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 récupérer des données à partir d'une base de données ou d'une API

, ou incorporant des fonctionnalités telles que le défilement infini ou le chargement paresseux.

Avantages de la pagination personnalisée

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

• Cela peut améliorer l'évolutivité de votre application, lui permettant de gérer plus efficacement de plus grandes quantités de données. Ceci est particulièrement important pour les applications qui traitent de grands ensembles de données.
• La pagination personnalisée peut améliorer les performances de votre application en divisant les données en blocs plus petits et plus faciles à gérer. Cela réduira le temps de chargement.
• Avec la pagination personnalisée, vous bénéficierez d'une flexibilité et d'un contrôle accrus dans la présentation et l'accès aux données dans votre application.

Implémentation du chargement dynamique avec une pagination personnalisée

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 :

1. Déterminer la méthode de pagination: Choisissez une méthode de pagination qui convient le mieux à votre contenu. Cela pourrait être un traditionnel basé sur la page système de pagination, où les utilisateurs cliquent pour charger la page suivante, ou un DEFILEMENT infini système, où plus de contenu est chargé lorsque l'utilisateur fait défiler la page.
2. Écrire du code côté serveur et côté client: vous allez écrire du code côté serveur pour gérer les demandes de pagination pour des pages de données spécifiques et renvoyer uniquement les données de cette page. Vous écrirez ensuite du code côté client pour écouter les actions de l'utilisateur qui déclenchent des demandes de données supplémentaires, comme cliquer sur un Charger plus bouton ou défilement vers le bas de la page.
3. Implémenter le chargement des données: Lorsque l'utilisateur déclenche une demande de données supplémentaires, l'application doit envoyer une demande côté serveur pour la page de données suivante. Le côté serveur doit alors renvoyer uniquement les données de cette page, que l'application peut utiliser pour mettre à jour la page.
4. Mettre à jour la page: Enfin, vous mettrez à jour la page avec les données nouvellement chargées. Cela peut impliquer d'ajouter les nouvelles données à une liste d'éléments existante ou de remplacer la liste entière par les nouvelles données.

Configuration de la source de données

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érer une simple API REST qui renvoie une liste de livres.

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

{
"données": [
 {
"identifiant": 1,
"titre": "Le receveur dans le seigle",
"auteur": "JD Salinger"
 },
 {
"identifiant": 2,
"titre": "Tuer un oiseau moqueur",
"auteur": "Harper Lee"
 },
// ...
 ],
"page": 1,
"pages totales": 5
}

Pour récupérer ces données dans notre application React Native, nous pouvons utiliser le aller chercher fonction, qui renvoie un Promesse qui se résout avec la réponse de l'API REST.

Création d'une fonction de pagination personnalisée

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.

Bien définir 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.

constante PAGE_SIZE = 10;
constante chercherLivres = asynchrone (page) => {
essayer {
constante réponse = attendre aller chercher(` https://myapi.com/books? pages=${page}&pageSize=${PAGE_SIZE}`);
constante json = attendre réponse.json();
retour json.data;
 } attraper (erreur) {
console.error (erreur);
retour [];
 }
}

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

Implémentation du chargement dynamique à l'aide de la fonction de pagination personnalisée

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 le Liste plate composant, qui est un composant hautes performances pour le rendu de grandes listes de données dans React Native.

Tout d'abord, configurez le Liste plate composant avec un état initial :

importer Réagir, { useState, useEffect } depuis'réagir';
importer { FlatList, Affichage, Texte } depuis'réagir natif';
constante Application = () => {
constante [livres, setBooks] = useState([]);
constante [currentPage, setCurrentPage] = useState(1);
 useEffet(() => {
// Récupère la première page de données
 fetchBooks (pageactuelle).then(données => setBooks (données));
 }, []);
constante renderItem = ({ article }) => {
retour (

taille de police: 18 }}>{item.title}</Text>
taille de police: 14 }}>{item.author}</Text>
 </View>
 );
 };
retour (
 data={livres}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
exporterdéfaut application ;

Ce code configure le composant FlatList avec deux éléments d'état, à savoir livres et page actuelle. Nous utilisons le utiliserEffet() 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 rendu fonction qui prend un élément de la livres tableau et retourne un Voir contenant le titre et l'auteur du livre.

Enfin, nous avons passé le livres tableau à la données accessoire de la Liste plate, avec notre élément de rendu fonction et keyExtractor.

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 le onEndReached accessoire fourni au Liste plate, qui est un rappel appelé lorsque l'utilisateur fait défiler jusqu'à la fin de la liste. Nous devrions également mettre à jour notre page actuelle état pour garder une trace de la page sur laquelle nous sommes actuellement.

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

importer Réagir, { useState, useEffect } depuis'réagir';
importer { FlatList, Affichage, Texte } depuis'réagir natif';
constante Application = () => {
constante [livres, setBooks] = useState([]);
constante [currentPage, setCurrentPage] = useState(1);
constante [isLoading, setIsLoading] = useState(FAUX);
 useEffet(() => {
 fetchBooks (pageactuelle).then(données => setBooks (données));
 }, []);
constante chercherPlus = asynchrone () => {
si (est en cours de chargement) retour;
 setIsLoading(vrai);
constante PageSuivante = PageActuelle + 1;
constante nouvelleDonnée = attendre récupérer les livres (page suivante);
 setPageActuelle (pagesuivante);
 setIsLoading(FAUX);
 setBooks(prevData => [...prevData, ...newData]);
 };
constante renderItem = ({ article }) => {
retour (
rembourrage: 16 }}>
taille de police: 18 }}>{item.title}</Text>
taille de police: 14 }}>{item.author}</Text>
 </View>
 );
 };
retour (
 data={livres}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
exporterdéfaut application ;

Ici, nous avons ajouté deux nouveaux états appelés est en cours de chargement et onEndReachedThreshold. est en cours de chargement garde une trace de si nous récupérons actuellement des données, et onEndReachedThreshold tire le onEndReached rappel lorsque l'utilisateur a fait défiler jusqu'à 10 % de la fin de la liste.

Nous avons créé une nouvelle fonction appelée chercherPlus qui tourne quand onEndReached 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 à notre Liste plate composant. Le Liste plate chargera désormais dynamiquement les données lorsque l'utilisateur défilera jusqu'à la fin de la liste.

Améliorez les performances de votre application à l'aide de la pagination personnalisée

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.