recyclerlistview
Version 4.2.1
Wenn dieses Projekt Ihnen geholfen hat, unterstützen Sie uns bitte mit einem Stern?
Dies ist eine Hochleistungsliste für React Native und Web mit Unterstützung für komplexe Layouts. JS nur ohne native Abhängigkeiten, inspiriert sowohl von Recyclerview zu Android als auch von UicollectionView auf iOS.
npm install --save recyclerlistview
Für die neueste Beta:
npm install --save recyclerlistview@beta
Hinweis: Die Dokumentation wird in Kürze aktualisiert. Überprüfen Sie den Code -Kommentar für Klarheit und Erkundungsfunktionen. Diese Komponente wird auch aktiv mit React Native Web getestet.
RecyclerListView verwendet "Cell Recycling", um Ansichten wiederzuverwenden, die nicht mehr sichtbar sind, um Elemente zu rendern, anstatt neue Ansichtsobjekte zu erstellen. Die Erstellung von Objekten ist sehr teuer und wird mit einem Speicheraufwand geliefert, was bedeutet, dass der Speicherausdruck beim Scrollen der Liste steigt. Das Verlassen unsichtbarer Elemente aus dem Gedächtnis ist eine weitere Technik, die jedoch zur Schaffung von noch mehr Objekten und vielen Müllsammlungen führt. Recycling ist der beste Weg, um unendliche Listen zu rendern, die keine Leistung oder Speichereffizienz beeinträchtigen.
Abgesehen von allen Leistungsvorteilen verfügt die RecyclerlistView mit großartigen Funktionen über die Box:
forceNonDeterministicRendering )RecyclerListView wurde unter Berücksichtigung der Leistung erstellt, was bedeutet, dass keine Leerzeichen, während schnelle Schriftrollen oder Rahmen fallen. RecyclerListView ermutigt Sie, deterministische Höhen für Elemente zu haben, die Sie zum Rendern benötigen. Dies bedeutet nicht, dass Sie alle Elemente derselben Höhe und Dinge haben müssen. Sie können weiterhin alle Arten von Gridviews und Listviews mit verschiedenen Arten von Elementen durchführen, die alle auf optimale Weise recycelt werden. Typbasiertes Recycling ist sehr einfach und kommt aus der Box.
Falls Sie keine Höhen der Elemente im Voraus bestimmen können, setzen Sie nur das forceNonDeterministicRendering Prop in RecyclerlistView auf wahr. Jetzt behandelt es die gegebenen Abmessungen als Schätzungen und lässt die Elemente die Größe der Größe. Versuchen Sie, gute Schätzungen zu geben, um die Erfahrung zu verbessern.
Produktion Flipkart Lebensmittel -Demo -Video (oder probieren Sie die App): https://youtu.be/6yqeqp3mmou
Infinite Lade-/View-Änderung (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
Gemischte ViewTypes: https://snack.expo.io/b1gyad52b
ExtendedState, StableIds und ItemAnimator (Expo): https://snack.expo.io/@arunreddy10/19bb8e
Beispielprojekt: https://github.com/naqvitalha/travelmate
Web Beispiel (mit RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-ögebart-8ff0d0.netlify.com/
Probe für die Kontextkonservierung
Anderes Video: https://www.youtube.com/watch?v=tnv4HMMPGMC
| Stütze | Erforderlich | Parameter Typ | Beschreibung |
|---|---|---|---|
| LayoutProvider | Ja | BaselayoutProvider | Konstruktorfunktion, die das Layout (Höhe / Breite) jedes Elements definiert |
| DataProvider | Ja | DataProvider | Konstruktorfunktion Die definiert die Daten für jedes Element |
| ContextProvider | NEIN | ContextProvider | Wird verwendet, um die Scrollposition beizubehalten, falls die Ansicht zerstört wird, was häufig bei der Rückennavigation auftritt |
| Rowrenderer | Ja | (Typ: String | Nummer, Daten: Any, Index: Nummer) => JSX.Element | Jsx.element [] | NULL | Methode, die die zu rendernde Reaktionskomponente zurückgibt. Sie erhalten Typ, Daten, Index und ExtendedState der Ansicht im Rückruf |
| InitialOffset | NEIN | Nummer | Erstversetzt, von dem Sie beginnen möchten, auszurotten; Dies ist sehr nützlich, wenn Sie den Scroll -Kontext über Seiten hinweg aufrechterhalten möchten. |
| renderaheadoffset | NEIN | Nummer | Geben Sie an, wie viele Pixel im Voraus Sie möchten, dass Ansichten gerendert werden. Erhöhung dieses Werts kann dazu beitragen, die Rohlinge (falls vorhanden) zu reduzieren. Wenn Sie dies so niedrig wie möglich halten, sollte dies jedoch die Absicht sein. Höhere Werte erhöhen auch den Wiederumrender-Computer |
| Ishorizontal | NEIN | boolean | Wenn wahr, funktioniert die Liste eher horizontal als vertikal |
| ONSCROLL | NEIN | RawEvent: Scrollevent, OffsetX: Nummer, Offsety: Nummer) => void | Bei Scroll -Rückruffunktion, die als Benutzer Scrolls ausgeführt wird |
| onrecreate | NEIN | (Params: OnrecreateParams) => void | Rückruffunktion, die bei der Nachbildung der Recycler -Ansicht aus dem Kontextanbieter ausgeführt wird |
| externalcrollview | NEIN | {new (Requisiten: scrollViewDefaultProps): BaseScrollView} | Verwenden Sie dies, um Ihre Einführung von BaseScrollView zu übergeben |
| OnendReached | NEIN | () => void | Rückruffunktion, die ausgeführt wird, wenn das Ende der Ansicht getroffen wird (minus Onendthreshold, falls definiert) |
| OnendReached Threshold | NEIN | Nummer | Geben Sie an, wie viele Pixel im Voraus für den OnendReached Callback |
| OnendReached Thresholdrelative | NEIN | Nummer | Geben Sie an, wie weit das Ende (in Einheiten der sichtbaren Länge der Liste) vom unteren Rand der Liste vom Ende des Inhalts sein muss, um den OnendReached -Rückruf auszulösen |
| onvisibleIndiceChanged | NEIN | Tonitemstatuschanged | Bietet sichtbaren Index; hilfreich beim Senden von Impression -Events |
| onvisibleIndexeChanged | NEIN | Tonitemstatuschanged | (Veraltet in 2.0 Beta) liefert sichtbaren Index; hilfreich beim Senden von Impression -Events |
| Renderfoter | NEIN | () => Jsx.element | Jsx.element [] | NULL | Geben Sie diese Methode an, wenn Sie eine Fußzeile rendern möchten. Hilfreich bei der Anzeige eines Loaders bei inkrementellen Lasten |
| InitialRenderIndex | NEIN | Nummer | Geben Sie den anfänglichen Element -Index an, den Sie mit dem Rendern beginnen möchten. Vorgezogen gegenüber InitialOffset, wenn beide angegeben sind |
| Scrollthrottle | NEIN | Nummer | nur iOS; Drosselklappendauer |
| Canchangesize | NEIN | boolean | Geben Sie an, ob sich die Größe ändern kann |
| Entfernung von der Förderung | NEIN | Nummer | (Decricing) Verwenden Sie applyWindowCorrection() -API mit windowShift . Verwendung? |
| applywindowcorrection | NEIN | (Offset: Nummer, Fensterkorrektur: Fensterkorrektur) => void | (Verbesserung/Ersatz in die distanceFromWindow -API) ermöglicht die Aktualisierung der sichtbaren Fenstergebunden auf der Grundlage der bestandenen Korrekturwerte. Der Benutzer kann die Fensterverschiebung angeben. Falls die gesamte RecyclerListWindow nach unten/nach oben verschieben muss, starten Sie die Korrektur . Wenn das obere Fenstergebundene verschoben werden muss, damit ein oberes oberes Fenster nach unten verschoben werden muss, überlappt ein Inhalt die obere Kante von RecyclerlistView, Endkorrektur : Um das untere Fenster für einen ähnlichen Anwendungsfall zu ändern. Verwendung? |
| UseWindowsCroll | NEIN | boolean | Nur Web; Layoutelemente im Fenster anstelle eines scrollbaren Divs |
| Deaktivierung | NEIN | boolean | Schaltet das Recycling aus |
| ForcenondeterministicRendering | NEIN | boolean | Standard ist falsch; Wenn aktivierte Dimensionen im Layoutanbieter bereitgestellt werden, werden nicht streng durchgesetzt. Verwenden Sie dies, wenn Elementabmessungen nicht genau bestimmt werden können |
| erweitert | NEIN | Objekt | In einigen Fällen enthalten die auf Zeilenebene übergebenen Daten möglicherweise nicht alle Informationen, von denen das Element abhängt. Durch das Ändern dieses Objekts wird alles erneut geführt. Stellen Sie sicher, dass Sie es nicht häufig ändern, um die Leistung zu gewährleisten. Neuanfänger sind schwer. |
| Elementanimator | NEIN | Elementanimator | Ermöglicht die Animation von RecyclerListView -Elementzellen (verschieben, hinzufügen, entfernen usw.) |
| Stil | NEIN | Objekt | Um den Stil an Inner Scrollview weiterzugeben |
| ScrollViewProps | NEIN | Objekt | Für alle Requisiten, die zu Inner/External Scrollview ausgewählt werden müssen. Legen Sie sie in ein Objekt und sie werden verteilt und weitergegeben. |
| Layouts | NEIN | Dimension | Verhindert das anfängliche leere Render, das erforderlich ist, um die Größe des ListView zu berechnen und diese Dimensionen zu verwenden, um die Listenelemente im ersten Render selbst zu rendern. Dies ist nützlich für Fälle wie das Rendering der Serverseite. Die Prop -Canchangesize muss auf True eingestellt werden, wenn die Größe nach dem Rendering geändert werden kann. Beachten Sie, dass dies nicht die Größe der Bildlaufansicht ist und ausschließlich zum Layout verwendet wird. |
| Onitemlayout | NEIN | Nummer | Eine Rückruffunktion, die ausgeführt wird, wenn ein Element des RecyclerlistView (in einem Index) Layout war. Dies kann auch als Proxy für ItemsRendered -Art von Rückernständen verwendet werden. |
| Fensterkorrekturkonfigur | NEIN | Objekt | Wird zum Angeben verwendet, ist die Fensterkorrekturkonfiguration und ob sie auf einige Scroll -Ereignisse angewendet werden sollte |
Für den vollständigen Feature -Set sehen Sie sich die Prop -Definitionen von RecyclerListView (unten in der Datei) an. Alle ScrollView -Funktionen wie RefreshControl funktionieren auch nicht in der Box.
applyWindowCorrection wird verwendet, um die sichtbaren Fenstergrenzen der RecyclerlistView dynamisch zu ändern. Die Fensterkorrektur von RecyclerlistView zusammen mit dem aktuellen Scroll -Offset ist dem Benutzer ausgesetzt. Das windowCorrection besteht aus 3 numerischen Werten:
windowShift - Direkter Austausch des Parameters von distanceFromWindow . Die Fensterverschiebung ist der Offset -Wert, mit dem die RecyclerlistView als Ganzes im StickyContainer verschoben wird. Verwenden Sie diesen Param, um anzugeben, wie weit das erste Listenelement entfernt ist. Dieser Wert korrigiert die Scroll -Offsets für StickyObjects sowie RecyclerListView.startCorrection - StartCorrection wird verwendet, um die Verschiebung in der oberen sichtbaren Fenstergrenze anzugeben, mit der der Benutzer auch dann die richtige Sticky -Header -Instanz empfangen kann, wenn ein externer Faktor wie Koordinator -Symbolleiste.endCorrection - Endkorrektur wird verwendet, um die Verschiebung in der unteren sichtbaren Fenster festzulegen, mit der der Benutzer eine korrekte klebrige Fußzeile -Instanz empfangen kann, wenn ein externer Faktor wie die untere App -Balken die sichtbare Ansicht verändert.Wie im folgenden Beispiel zu sehen
TypeScript funktioniert nicht in der Box. Die einzige Execption besteht bei den ererbten Scrollview -Requisiten. Damit TypeScript mit ererbten ScrollView -Requisiten funktioniert, müssen Sie die ererbten ScrollView -Requisiten innerhalb der ScrollViewProps -Requisiten platzieren.
< RecyclerListView
rowRenderer = { this . rowRenderer }
dataProvider = { queue }
layoutProvider = { this . layoutProvider }
onScroll = { this . checkRefetch }
renderFooter = { this . renderFooter }
scrollViewProps = { {
refreshControl : (
< RefreshControl
refreshing = { loading }
onRefresh = { async ( ) => {
this . setState ( { loading : true } ) ;
analytics . logEvent ( 'Event_Stagg_pull_to_refresh' ) ;
await refetchQueue ( ) ;
this . setState ( { loading : false } ) ;
} }
/>
)
} }
/> recyclerlistview/web EG, import { RecyclerListView } from "recyclerlistview/web" . Verwenden Sie Aliase, wenn Sie den Importpfad erhalten möchten. Nur plattformspezifischer Code ist Teil des Builds. Kein unnötiger Code wird mit Ihrer App versendet.requestAnimationFrame , ResizeObserver Apache v2.0
Bitte öffnen Sie Probleme für Fehler, denen Sie begegnen. Sie können mich auf Twitter @naqvitalha an mich wenden oder an [email protected] schreiben, um Fragen zu erhalten, die Sie möglicherweise haben.
