La pagination fait référence au système de division de grandes quantités de données en morceaux ou pages plus petits et plus faciles à gérer afin d’améliorer les performances et la convivialité. La pagination personnalisée, si elle est mise en œuvre correctement, peut offrir une meilleure expérience utilisateur. Découvrez comment 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 les 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 paresseux.
Avantages de la pagination personnalisée
Créer un système de pagination personnalisé pour vos applications mobiles React Native peut présenter certains avantages :
- Il peut améliorer l’évolutivité de votre app, en lui permettant de gérer de plus grandes quantités de données de manière plus efficace. Ceci est particulièrement important pour les apps 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 morceaux plus petits et plus faciles à gérer. Cela permet de réduire le temps de chargement.
- Grâce à la pagination personnalisée, vous bénéficiez d’une plus grande souplesse et d’un meilleur contrôle dans la présentation et l’accès aux données au sein de votre application.
Mise en œuvre du chargement dynamique avec la pagination personnalisée
Lorsque votre application React Native ne charge que les données nécessaires à ce moment-là, on parle de chargement dynamique. Pour mettre en œuvre le chargement dynamique avec une pagination personnalisée, vous pouvez suivre les étapes générales suivantes :
- Déterminer la méthode de pagination: Choisissez la méthode de pagination qui convient le mieux à votre contenu. Il peut s’agir d’une pagination traditionnelle à base de pages système de pagination, où les utilisateurs cliquent pour charger la page suivante, ou un système de pagination basé sur la page, où les utilisateurs cliquent pour charger la page suivante. défilement infini système dans lequel le contenu est chargé au fur et à mesure que l’utilisateur fait défiler la page.
- Écrire du code côté serveur et côté client: Vous écrirez du code côté serveur pour gérer les demandes de pagination pour des pages spécifiques de données et ne renvoyer que 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 le fait de cliquer sur un bouton de la barre d’outils. En savoir plus ou en défilant jusqu’au bas de la page.
- Mise en place du chargement des données: Lorsque l’utilisateur déclenche une demande de données supplémentaires, l’application doit envoyer une demande au serveur pour obtenir la page de données suivante. Le serveur doit alors renvoyer uniquement les données de cette page, que l’application peut utiliser pour mettre à jour la page.
- Mise à jour de la page: Enfin, vous mettrez à jour la page avec les nouvelles données chargées. Il peut s’agir 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 d’une 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érons une API REST simple qui renvoie une liste de livres.
Voici un exemple de ce à quoi la réponse de l’API pourrait ressembler :
{
"data": [
{
"id": 1,
"title": "The Catcher in the Rye",
"author": "J.D. Salinger"
},
{
"id": 2,
"title": "To Kill a Mockingbird",
"author": "Harper Lee"
},
// ...
],
"page": 1,
"totalPages": 5
}
Pour récupérer ces données dans notre application React Native, nous pouvons utiliser la méthode fetch 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
Passons à la création d’une fonction qui récupérera les données de l’API et mettra à jour l’état avec les nouvelles données reçues. Cette fonction décidera de ce qui doit être rendu 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 promesse qui se résout avec les données récupérées.
const PAGE_SIZE = 10;
const fetchBooks = async (page) => {
try {
const response = await fetch(`https://myapi.com/books?page=${page}&pageSize=${PAGE_SIZE}`);
const json = await response.json();
return json.data;
} catch (error) {
console.error(error);
return [];
}
}
Dans le bloc de code ci-dessus, la fonction fetchBooks prend un page et renvoie une promesse qui se résout avec les données de cette page. Ici, le paramètre PAGE_SIZE La constante PAGE_SIZE est utilisée pour limiter le nombre de livres récupérés par page.
Mise en œuvre du chargement dynamique à l’aide de la fonction de pagination personnalisée
La fonction de pagination personnalisée étant définie, vous pouvez maintenant l’utiliser pour mettre en œuvre le chargement dynamique dans l’application. Pour ce faire, utilisez la fonction FlatList qui est un composant haute performance pour le rendu de grandes listes de données dans React Native.
Tout d’abord, configurez le composant FlatList avec un état initial :
import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';
const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
// Fetch initial page of data
fetchBooks(currentPage).then(data => setBooks(data));
}, []);
const renderItem = ({ item }) => {
return (
<View>
<Text style={{ fontSize: 18 }}>{item.title}</Text>
<Text style={{ fontSize: 14 }}>{item.author}</Text>
</View>
);
};
return (
<FlatList
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
export default App;
Ce code configure le composant FlatList avec deux éléments d’état, à savoir livres et page actuelle. Nous utilisons la méthode useEffect() pour récupérer la page initiale de données lors du premier lancement de notre application.
Ensuite, nous définissons un renderItem qui prend un élément de la base de données livres et renvoie un tableau Voir contenant le titre et l’auteur du livre.
Enfin, nous avons passé le cap de la livres tableau à la données accessoire de la FlatList, ainsi que notre renderItem fonction et extracteur de clés.
Nous devons maintenant nous assurer que notre Flatlist peut détecter lorsqu’un utilisateur fait défiler la liste jusqu’à la fin. À ce moment-là, elle doit récupérer et charger les nouvelles données et les afficher.
Pour ce faire, nous utiliserons la méthode onEndReached prop fournie au FlatListqui est un rappel appelé lorsque l’utilisateur fait défiler la liste jusqu’à la fin. Nous devons également mettre à jour notre page actuelle pour garder une trace de la page sur laquelle nous nous trouvons actuellement.
Voici le code mis à jour qui implémente tout cela :
import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';
const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
fetchBooks(currentPage).then(data => setBooks(data));
}, []);
const fetchMore = async () => {
if (isLoading) return;
setIsLoading(true);
const nextPage = currentPage + 1;
const newData = await fetchBooks(nextPage);
setCurrentPage(nextPage);
setIsLoading(false);
setBooks(prevData => [...prevData, ...newData]);
};
const renderItem = ({ item }) => {
return (
<View style={{ padding: 16 }}>
<Text style={{ fontSize: 18 }}>{item.title}</Text>
<Text style={{ fontSize: 14 }}>{item.author}</Text>
</View>
);
};
return (
<FlatList
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
export default App;
Nous avons ajouté deux nouveaux états appelés isLoading et onEndReachedThreshold. isLoading permet de savoir si nous sommes en train de récupérer des données, et onEndReachedThreshold déclenche la fonction onEndReached Rappel lorsque l’utilisateur a défilé jusqu’à 10 % de la fin de la liste.
Nous avons créé une nouvelle fonction appelée fetchMore qui s’exécute lorsque onEndReached est déclenché. Il vérifie si nous sommes déjà en train de charger 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 éléments nécessaires à notre FlatList composant. Le composant FlatList Le composant FlatList chargera désormais dynamiquement les données lorsque l’utilisateur fera défiler la liste jusqu’à la fin.
Améliorez les performances de votre application en utilisant une pagination personnalisée
Vous avez appris à charger des données de manière dynamique 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 la personnaliser davantage pour obtenir l’apparence et les fonctionnalités souhaitées. Dans l’ensemble, cela vous aidera certainement à optimiser les performances de votre application.
