react native big list
Release 1.6.1
Documentation
Il s'agit d'une vue de liste haute performance pour React Native avec la prise en charge des dispositions complexes en utilisant une utilisation plate à plate-forme similaire pour faciliter le remplacement. Cette mise en œuvre de la liste pour le rendu des grandes liste sur React Native fonctionne avec un recycleur axé sur les performances et l'utilisation de la mémoire et permet donc de traiter des milliers d'éléments sur la liste.
Vous pouvez également l'essayer sur l'application Web publiée: démo
La liste plate de React Native est excellente, mais en ce qui concerne les grandes listes, il a des défauts en raison de sa mise en cache d'article. Existe certaines alternatives comme react-native-largelist et recyclerlistview , mais les deux ont des problèmes.
Le react-native-largelist n'est pas compatible avec le Web et l'Expo, a un code natif qui doit parfois être réajusté et maintenu, a des recycles d'articles de liste étrange (car il n'a jamais d'éléments vierges), a besoin d'une restructuration de données et à avoir des problèmes lorsque vous essayez de traiter beaucoup de données (par exemple: 100 000 éléments) car il congelerait le CPU.
Le recyclerlistview est performant mais souffre d'un cadre vide sur le mont, des positions de défilement étranges lorsque vous essayez de faire défiler un élément sur le mont, et la mise en œuvre d'en-têtes collantes entre en conflit avec Animated .
Recycler facilite l'affichage efficace de grands ensembles de données. Vous fournissez les données et définissez à quoi ressemble chaque élément, et la bibliothèque Recycler crée dynamiquement les éléments lorsqu'ils sont nécessaires. Comme son nom l'indique, le recycleur recycle ces éléments individuels. Lorsqu'un élément défile de l'écran, le recycleur ne détruit pas sa vue. Au lieu de cela, le recycleur réutilise la vue pour les nouveaux éléments qui ont fait défiler à l'écran. Cette réutilisation améliore considérablement les performances, l'amélioration de la réactivité de votre application et la réduction de la consommation d'énergie.
Lorsque la liste ne peut pas rendre vos articles assez rapidement, les composants non renvoyés apparaîtront comme un espace vide.
Cette bibliothèque est entièrement native JS, il est donc compatible avec toutes les plates-formes disponibles: Android, iOS, Windows, MacOS, Web et Expo .
Installez la bibliothèque à partir de NPM ou de fil en exécutant simplement l'une des lignes de commande suivantes:
| NPM | fil |
|---|---|
npm install react-native-big-list --save | yarn add react-native-big-list |
Lisez également comment migrer de Flatlist
Exemple de base:
import BigList from "react-native-big-list" ;
// ...
const MyExample = ( { data } ) => {
const renderItem = ( { item , index } ) => < MyListItem item = { item } /> ;
return < BigList data = { data } renderItem = { renderItem } itemHeight = { 50 } /> ;
} ; Pour plus d'exemples, consultez l' example de répertoire le répertoire list ou consultez la documentation
| Biglist vs Flatlist | Liste des sections |
|---|---|
 |  |
Clone ou téléchargement de téléchargement et après:
cd Example
yarn install # or npm install
expo start Ouvrez le client Expo sur votre appareil. Utilisez-le pour scanner le code QR imprimé par expo start . Vous devrez peut-être attendre une minute pendant que votre projet regorge et charge pour la première fois.
Vous pouvez également l'essayer sur l'application Web publiée: démo
La liste a les mêmes accessoires de ScrollView en plus de ses accessoires et méthodes spécifiques.
Vous avez une idée? Vous avez trouvé un bug? Veuillez soulever des problèmes ou retirer la demande. Les contributions sont les bienvenues et sont grandement appréciées! Chaque petit morceau aide et le crédit sera toujours accordé.
