react native big list
Release 1.6.1
Dokumentation
Dies ist eine Hochleistungslistenansicht für React Native mit Unterstützung für komplexe Layouts unter Verwendung einer ähnlichen Flatlist -Verwendung, um den Austausch zu vereinfachen. Diese Listen -Implementierung für große Listen -Rendering bei React Native funktioniert mit einem Recycler, der sich auf Leistung und Speichernutzung konzentriert. Daher ermöglicht sie die Verarbeitung von Tausenden Elementen auf der Liste.
Sie können es auch in der veröffentlichten Web -App: Demo versuchen
Die Flatlist von React Native ist großartig, aber wenn es um große Listen geht, hat es aufgrund seines Ausgespannens des Gegenstandes einige Fehler. Es gibt einige Alternativen wie react-native-largelist und recyclerlistview , aber beide haben einige Probleme.
Der react-native-largelist ist nicht mit Web und Expo kompatibel, verfügt über einen nativen Code, der manchmal angepasst und gepflegt werden muss, eine seltsame Listenelementrecycles (weil er noch nie leere Elemente hat), benötigt Daten umstrukturiert und hat einige Probleme, wenn Sie versuchen, viele Daten zu verarbeiten (z. B. 100.000 Elemente), da er das CPU einfrieren würde.
Die recyclerlistview ist leistungsfähig, leidet jedoch an einem leeren Rahmen am Mount, seltsame Bildlaufpositionen, wenn Sie versuchen, zu einem Element am Mount zu scrollen, und die Implementierung von klebrigen Headern in Konflikt mit Animated .
Recycler erleichtert es einfach, große Datensätze effizient anzuzeigen. Sie liefern die Daten und definieren, wie jedes Element aussieht, und die Recycler -Bibliothek erstellt dynamisch die Elemente, wenn sie benötigt werden. Wie der Name schon sagt, recycelt der Recycler diese einzelnen Elemente. Wenn ein Element den Bildschirm vom Bildschirm scrollt, zerstört der Recycler seine Ansicht nicht. Stattdessen gibt der Recycler die Ansicht für neue Elemente wieder aus, die auf dem Bildschirm gescrollt wurden. Diese Wiederverwendung verbessert die Leistung erheblich, verbessert die Reaktionsfähigkeit Ihrer App und verringert den Stromverbrauch.
Wenn die Liste Ihre Elemente nicht genug rendern kann, werden die nicht gerenderten Komponenten als leerer Speicherplatz angezeigt.
Diese Bibliothek ist vollständig JS -nativ und ist daher mit allen verfügbaren Plattformen kompatibel: Android, iOS, Windows, MacOS, Web und Expo .
Installieren Sie die Bibliothek von NPM oder Garn aus, die gerade eine der folgenden Befehlszeilen ausführen:
| NPM | Garn |
|---|---|
npm install react-native-big-list --save | yarn add react-native-big-list |
Lesen Sie auch, wie Sie aus der Flatlist migrieren
Grundlegendes Beispiel:
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 } /> ;
} ; Weitere Beispiele überprüfen Sie das example im list oder überprüfen Sie die Dokumentation
| Biglist gegen Flatlist | Abschnittsliste |
|---|---|
 |  |
Klonen oder repo herunterladen und nach:
cd Example
yarn install # or npm install
expo start Öffnen Sie den Expo -Client auf Ihrem Gerät. Verwenden Sie es, um den von expo start gedruckten QR -Code zu scannen. Möglicherweise müssen Sie eine Minute warten, während Ihr Projekt zum ersten Mal bündelt und lädt.
Sie können es auch in der veröffentlichten Web -App: Demo versuchen
Die Liste enthält zusätzlich zu ihren spezifischen Requisiten und Methoden die gleichen Requisiten der Scrollview.
Eine Idee haben? Einen Fehler gefunden? Bitte erheben Sie Probleme oder ziehen Sie die Anfrage an. Beiträge sind willkommen und sehr geschätzt! Jedes bisschen hilft und Kredit wird immer erhalten.
