React-native-snap-carousel: FlatList durch eine andere Komponente ersetzen?

Zwei Hauptnachteile:

• Der erste erweitert ein ScrollView .
• Das zweite Plugin ist ein natives Plugin, implementiert jedoch nicht die fehlenden Funktionen von FlatList , die das Karussell erheblich verbessern würden (Bildlaufdauer, Bildlaufrückruf ...).

Ehrlich gesagt finde ich FlatList unbrauchbar. Meine Problemumgehung für react-native-snap-carousel (was ich übrigens liebe) besteht darin, initialNumToRender auf data.length . Nur so erhalten Sie eine fehlerfreie Version.
Dies ist ein Ausschnitt aus meinem Skript nach der Installation:

# Stupid bug in flat list.
# <strong i="11">@see</strong> comment in ListCarousel.tsx
sed -i.bak -e "s/initialNumToRender={initialNumToRender}/initialNumToRender={data.length}/" node_modules/react-native-snap-carousel/src/carousel/Carousel.js

Nun wäre es schön, wenn react-native-snap-carousel eine Funktion unterstützen würde, mit der ich initialNumToRender von außen einstellen könnte, damit ich Carousel.js nicht mehr patchen muss.
Ich würde auch argumentieren, dass Carousel.js initialNumToRender standardmäßig auf data.length setzen möchte, wenn die erwartete Anzahl von Elementen unter 100 liegt (wahrscheinlich 90% aller Anwendungsfälle).

Von den beiden Bibliotheken, die Sie oben gefunden haben, finde ich react-native-largelist sehr faszinierend. Wäre es möglich, die fehlenden Funktionen zu umgehen oder den Autor davon zu überzeugen, diese hinzuzufügen?

Hey @PublicParadise ,

Nun, initialNumToRender ist Teil der überschreibbaren Requisiten, daher sollten Sie in der Lage sein, <Carousel initialNumToRender={data.length} /> ohne Patch zu verwenden ;-) Ich kann garantieren, dass es funktioniert, da ich es ausprobiert habe # 235.

Aber wenn Sie dies tun müssen und daher bereit sind, die Leistungsoptimierungen zu vergessen , die mit FlatList , würde ich empfehlen, einfach useScrollView auf true . Ich habe diese Requisite kürzlich mit Blick auf diese Art von Anwendungsfällen eingeführt, um den völlig fehlerhaften FlatList vollständig zu umgehen. Darüber hinaus können fantastische Funktionen wie diese eingeführt werden : p

In Bezug auf die beiden Plugins, die ich in Betracht ziehe, muss ich zuerst viele Tests durchführen. Es wäre auf jeden Fall hilfreich, wenn wir den Autor von react-native-largelist davon überzeugen könnten, die fehlenden, aber erforderlichen Funktionen zu implementieren!

Beachten Sie, dass ich im Moment nicht sicher bin, mein eigenes Plugin auf ein natives zu stützen, da ich es nicht pflegen könnte, wenn der Autor damit aufhört (während ich kein Problem hätte, ein JS-Plugin zu übernehmen).

Hi @ bd-arc,

danke für die Tipps. Um ehrlich zu sein, war ich mit FlatList so frustriert, dass ich den Hack platziert und die Komponente nie wieder berührt habe. Damals war initialNumToRender keine überschreibbare Requisite und useScrollView scheint noch besser zu sein.

Es scheint, dass FlatList eine seltsame Abhängigkeit von Animated . Dort haben wahrscheinlich die meisten Menschen Probleme. Erst vor 6 Tagen hat jemand einen neuen Fehler gemeldet.

Ich selbst wollte auch FlatList ersetzen und recherchierte. Das Fenstern von Listen und das Rendern der angezeigten Elemente scheinen kein schwieriges Problem zu sein. Die RxJS / most.js-Lösungen haben mir am besten gefallen.

Hatten Sie Glück, eine dieser beiden Lösungen als Ersatz zu implementieren?

Nein, ich habe nur recherchiert. Damals hatte ich noch gehofft, dass sie irgendwann FlatList reparieren würden.
Lassen Sie mich einige Links aus meiner Forschung teilen:

• Naive unendliche Schriftrolle in der reaktiven Programmierung mit RxJS Observables
• Verwenden Sie RxJS mit React
• Recycling von Zeilen für native Listenansichten mit hoher Leistung
• Reagieren Sie auf native ListView-Experimente
• Bildlauftabelle mit cycle.js
• Erstellen Sie mit Bacon.js eine unendliche Bildlaufliste
• Grobe Übersetzung von Infinite-Bacon in RXJS

Aber ich habe das Gefühl, dass das native Plugin ( react-native-largelist ) der richtige Weg ist.

Vielen Dank für Ihre Forschungsergebnisse 👍

Um ehrlich zu sein, habe ich momentan keine Zeit, dies alles auf die Probe zu stellen. Wenn Sie Lust haben, in react-native-largelist , wäre das eine enorme Hilfe. Wenn nicht, halten wir uns gegenseitig auf dem Laufenden ;-)

Update: Als ich diese Links ausgrub, stellte ich fest, dass Tal Kol von wix.com einen wirklich guten Medium-Blog hat. Bisher mag ich alle seine Artikel. Dieser könnte auch für unsere Diskussion relevant sein:

• React Native ListView Performance Revisited - Recycling ohne Brücke
• BindingListView - Reagieren Sie auf die experimentelle Implementierung von Native ListView, die die direkte Ansichtsbindung unterstützt

@ bd-arc Wie hier habe ich einen ziemlich anspruchsvollen Tagesjob und meine Zeit und Ressourcen sind begrenzt.
Ich könnte mir die BindingListView ansehen. Aber ja: Lasst uns einander auf dem Laufenden halten :)

Ja, Tal Kol hat einige hochwertige Artikel über React Native und Leistungsoptimierung geschrieben.

Außerdem war ich besonders an Wix 'Plugin react-native-interactable interessiert, aber leider hatten sie in letzter Zeit keine Zeit, einige lästige Probleme anzugehen.

@ bd-arc Was ist das Problem mit recyclerlistview das ScrollView ? Sowohl large-list als auch FlatList bauen auf demselben auf.
Ich habe recyclerlistview geschrieben und kürzlich hat mein Team diese Karussellkomponente verwendet. Wir haben FlatList gegen recyclerlistview ausgetauscht und es funktioniert großartig.

Hey @naqvitalha , danke, dass

Nach meiner Erfahrung und bis jetzt zeigt alles, was auf einem ScrollView basiert, letztendlich Leistungseinschränkungen, wenn eine große Anzahl von Elementen zu handhaben ist und / oder Funktionseinschränkungen. Aber seien Sie versichert, dass mein Ziel darin besteht, das Gegenteil zu beweisen ;-)

Möchten Sie eine PR für diese Entwicklung einreichen, damit diese umfassend und gründlich getestet werden kann?

@ bd-arc Sicher. Lass mich das tun.

@naqvitalha @ bd-arc flatlist durch recyclerlistview zu ersetzen? Ich würde es gerne benutzen

Unabhängig von ScrollView FlatList und recyclerlistview , aber hat jemand untersucht, wie ein reaktionsnativer Gestenhandler diese Bibliothek verbessern kann?

Aus den Dokumenten:

Mit dieser Bibliothek werden Gesten nicht mehr vom JS-Responder-System gesteuert, sondern im UI-Thread erkannt und verfolgt. Es macht Berührungsinteraktionen und Gestenverfolgung nicht nur reibungslos, sondern auch zuverlässig und deterministisch.

Es erfordert react-native link , was unglücklich ist, um diese lib-Abhängigkeit frei zu halten. Aber es ist jetzt in Expo / CRNA enthalten.

Hey @ pcooney10 ,

Ich habe zuvor überlegt, ein benutzerdefiniertes PanResponder zu dem ScrollView / FlatList 1 zu implementieren (wie Sie in # 40 sehen können).

Haben Sie etwas Ähnliches mit react-native-gesture-handler versucht? Ich würde gerne ein Feedback bekommen, um festzustellen, ob dies eine legitime Idee oder ein direkter Weg zum Wahnsinn ist ...

@amitassaraf Verträge dieser Komponente sind FlatList sehr ähnlich, da Requisiten weitergegeben werden. Für RLV ist der Layoutanbieter obligatorisch. Es wird eine bahnbrechende Änderung sein oder wir müssen einen neuen Modus einführen.

Hallo allerseits, ich möchte ein wenig von meinen Erfahrungen mit dieser Komponente teilen. Ich musste es innerhalb von ScrollView was das Problem verursachte, dass alle Elemente von mehr angezeigt werden, als Sie für die Eigenschaft removeClippedSubviews angeben würden. Die Elemente werden nicht aus dem Speicher gelöscht, andernfalls wird jeder Pfad Es wurden neue Elemente erstellt, die dazu führten, dass die App den RAM- Speicher in Android leerte. Um einen korrekten Betrieb der Liste innerhalb einer ScrollView ( oder einer anderen Liste ) zu erhalten, verwenden Sie die folgenden FlatList -Eigenschaften.

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

removeClippedSubviews={Platform.OS != 'ios'}

Abhängig von Ihrem Fall können Sie die Werte konfigurieren, die Ihren Anforderungen am besten entsprechen. Auf diese Weise erhalten Sie die erwartete Leistung fast ohne Speicherverlust

@ machester4 Vielen Dank für Ihre Erkenntnisse! Diese Werte passen nicht in jeden Anwendungsfall, aber der Ansatz ist solide ;-)

Sie können diese Logik auf Ihre horizontalen Listen anwenden, die sich in einer vertikalen Liste befinden. In meinem Fall haben alle meine horizontalen Listen 3 Elemente gleichzeitig sichtbar. Aus diesem Grund sind die Werte maxToRenderPerBatch und initialNumToRender in 4, wodurch ich eine bessere Erfahrung für den Benutzer bekomme.

@naqvitalha Können Sie uns mitteilen, wie Sie FlatList im Karussell durch RecylerView ersetzt haben? Unterstützen Sie auch so etwas wie https://github.com/facebook/react-native/issues/20500 in RecyclerView?

@ bd-arc Heads up, ich bin mir ziemlich sicher, dass dies Auswirkungen auf react-native-snap-carousel Kunden haben wird:
https://github.com/facebook/react-native/issues/21070

Vielen Dank für das Heads-up @PublicParadise!

FlatList überrascht nie ... Es sieht so aus, als würde irgendwo ein InteractionManager ausgeführt, wodurch die Ausführung der Komponentenlogik verschoben wird.

Es ist definitiv Zeit, FlatList endgültig loszuwerden :-)

Hallo, gibt es bisher Updates in diesem Bereich?

Eigentlich hat FlatList meiner Meinung nach das Zeug dazu, eine wirklich großartige Listenkomponente zu werden.
Alles, was fehlt, ist das Konzept der "geschätzten Zeilenhöhe", das UITableView unter iOS hat.
Sie benötigen also KEINE Eigenschaft für "Wie viele Zeilen sollte ich asynchron anordnen, um Hacker und Tricks auszuführen".

Alles was wir brauchen ist, wie gesagt, ein estimatedRowHeight (möglicherweise mit Rückruf, um unterschiedliche Schätzungen pro Zeile zuzulassen, aber immer noch Schätzungen!).

• Dies wird verwendet, um die Inhaltsgröße der Bildlaufansicht zu berechnen.
• Wenn Sie zu einem Versatz scrollen, wird direkt dorthin gescrollt.
• Wann immer Sie Zeilen rendern - zwischenspeichern Sie deren Größe, nachdem sie angeordnet wurden.
• Verwenden Sie zwischengespeicherte Größen + geschätzte Zeilenhöhen, um den Versatz zu einem Element oder das Element für einen Versatz schnell zu berechnen.
• Wir können auch nicht Schätzungen / Caches für alle Zeilen vor einem sehr hohen Elementindex berücksichtigen, sondern nur eine Art Fenstergröße und eine durchschnittliche Schätzung für den Rest verwenden.

Die Größe des Inhalts wird sich also dynamisch ändern, aber niemand wird sich darum kümmern oder es fühlen, da Sie zum letzten Element oder einem anderen Index scrollen können und es ohne Störungen dorthin gelangt und Sie nicht so viel Arbeit erledigen, wie es sein wird fehlende Elemente beim Scrollen.

Hallo @naqvitalha , Haben Sie eine Niederlassung oder PR, die eine Flatlist für diese Komponente auf RLV migrieren möchten? Es wird sehr nützlich für mich sein. Vielen Dank.

Vielen Dank, dass Sie meine Komponente ausprobiert haben.

Für fast alle Szenen sollten Sie es so machen:

<Carousel  containerCustomStyle={{flex:1}} contentContainerCustomStyle={{flex:1}} renderItem={()=><LargeList ...props/>}/>

Und stellen Sie sicher, dass alle Eltern von Carousel den Stil { flex: 1 } haben.

Beachten Sie diesen Tipp:

LargeList default has a {flex:1} style，please be sure its parent has a bounded height.

LargeList kann nicht gut funktionieren, wenn die Elemente die Größe von LargeList unterstützen sollen. Sie sollten bestätigen, dass Ihre LargeList-Größe von ihrem übergeordneten Element oder einer begrenzten Höhe geerbt wurde.

Verzeihen Sie mir mein Pool-Englisch, wenn Sie Chinesisch verstehen. Überprüfen Sie dieses Problem

Die FlatList -Komponente ist einfach zu fehlerhaft, Punkt.

Diese Plugins können einen interessanten Ersatz darstellen:

* https://github.com/Flipkart/recyclerlistview

* https://github.com/bolan9999/react-native-largelist

gut gesagt