React-native-snap-carousel: Remplacer FlatList par un autre composant?

Deux inconvénients majeurs:

• Le premier étend un ScrollView .
• Le second est un plugin natif, mais il n'implémente pas les fonctionnalités manquantes de FlatList qui amélioreraient grandement le carrousel (durée de défilement, rappel de défilement ...).

Franchement, je trouve FlatList inutilisable. Ma solution de contournement pour react-native-snap-carousel (que j'aime BTW) consiste à définir initialNumToRender sur data.length . C'est la seule façon d'obtenir une version sans bogues.
Voici un extrait de mon script de post-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

Maintenant, ce serait bien si react-native-snap-carousel supportait une fonctionnalité qui me permettrait de définir initialNumToRender de l'extérieur pour ne plus avoir à patcher Carousel.js .
Je dirais également que Carousel.js pourrait vouloir définir initialNumToRender à data.length par défaut si le nombre prévu d'éléments est inférieur à 100 (probablement 90% de tous les cas d'utilisation).

Parmi les deux bibliothèques que vous avez trouvées ci-dessus, je trouve react-native-largelist très intrigante. Serait-il possible de contourner les fonctionnalités manquantes, ou peut-être de convaincre l'auteur de les ajouter?

Salut @PublicParadise ,

Eh bien, initialNumToRender fait partie des accessoires remplaçables , vous devriez donc pouvoir utiliser <Carousel initialNumToRender={data.length} /> sans avoir besoin d'un patch ;-) Je peux garantir que cela fonctionne, car je l'ai essayé en # 235.

Mais si vous devez le faire et, par conséquent, êtes prêt à oublier les optimisations de performances qui sont censées venir avec FlatList , je recommanderais de définir simplement useScrollView sur true . J'ai récemment introduit cet accessoire avec ce genre de cas d'utilisation à l'esprit et pour contourner complètement le buggy FlatList . De plus, il permet d'introduire des fonctionnalités impressionnantes comme celle-ci : p

En ce qui concerne les deux plugins que je considère, je dois d'abord lancer de nombreux tests. Cela aiderait certainement si nous pouvions convaincre l'auteur de react-native-largelist d'implémenter les fonctionnalités manquantes mais requises!

Notez que pour le moment je ne me sens pas confiant de baser mon propre plugin sur un plugin natif car je ne serais pas capable de le maintenir si l'auteur arrête de le faire (alors que je n'aurais aucun problème à reprendre un plugin JS).

Salut @ bd-arc,

Merci pour les conseils. Pour être honnête, j'ai été tellement frustré par FlatList que j'ai placé le hack et n'ai plus jamais touché le composant. À l'époque, initialNumToRender n'était pas un accessoire remplaçable et useScrollView semble encore mieux.

Il semble que FlatList a une dépendance étrange à Animated . C'est probablement là que la plupart des gens ont des problèmes. Il y a à peine 6 jours, quelqu'un a déposé un nouveau bogue à ce sujet.

J'ai moi-même cherché à remplacer FlatList et j'ai fait quelques recherches. Le fenêtrage des listes et le rendu de ce qui est affiché ne semblent pas être considérés comme un problème difficile. J'ai bien aimé les solutions RxJS / most.js.

Avez-vous eu la chance de mettre en œuvre l'une de ces deux solutions en remplacement?

Non, je n'ai fait que la recherche. À l'époque, j'espérais toujours qu'ils finiraient par réparer FlatList .
Permettez-moi de partager quelques liens de mes recherches:

• Défilement naïf infini dans la programmation réactive à l'aide des observables RxJS
• Utiliser RxJS avec React
• Recyclage de lignes pour les vues de liste natives React hautes performances
• Expériences de React Native ListView
• Faire défiler le tableau en utilisant cycle.js
• Créez une liste de défilement infinie avec Bacon.js
• Traduction approximative de bacon infini en rxjs

Mais j'ai le sentiment que le plugin natif ( react-native-largelist ) est la bonne voie à suivre.

Merci de partager vos recherches 👍

Pour être honnête, je n'ai pas le temps pour le moment de mettre tout cela à l'épreuve. Si vous avez envie de plonger dans react-native-largelist , ce serait d'une aide précieuse. Sinon, assurons-nous de nous tenir au courant ;-)

Mise à jour: en recherchant ces liens, j'ai réalisé que Tal Kol de wix.com avait un très bon blog Medium. Jusqu'à présent, j'aime tous ses articles. Celui-ci pourrait également être pertinent pour notre discussion:

• Les performances de React Native ListView revisitées - Recyclage sans pont
• BindingListView - Implémentation expérimentale React Native ListView prenant en charge la liaison de vue directe

@ bd-arc Même chose ici, j'ai un travail de jour assez exigeant et mon temps et mes ressources sont limités.
Je pourrais regarder le BindingListView . Mais oui: tenons-nous mutuellement au courant :)

Oui, Tal Kol a écrit des articles de grande qualité sur React Native et l'optimisation des performances.

De plus, j'étais particulièrement intéressé par le plugin de Wix react-native-interactable , mais malheureusement, ils n'ont pas eu le temps ces derniers temps de s'attaquer à des problèmes embêtants.

@ bd-arc Quel est le problème avec recyclerlistview étendant ScrollView ? Les deux large-list et FlatList s'appuient sur le même.
J'ai écrit recyclerlistview et récemment mon équipe a utilisé ce composant de carrousel. Nous avons échangé FlatList avec recyclerlistview et cela fonctionne très bien.

Hé @naqvitalha , merci d'avoir brillé!

D'après mon expérience, et jusqu'à présent, tout ce qui repose sur un ScrollView montre finalement des limitations de performances lorsqu'il y a un grand nombre d'éléments à gérer et / ou des limitations de fonctionnalités. Mais soyez assuré que mon objectif est de se tromper ;-)

Seriez-vous intéressé à soumettre un PR pour cette évolution afin qu'elle puisse être largement et minutieusement testée?

@ bd-arc Bien sûr. Laisse moi faire ça.

@naqvitalha @ bd-arc Des mises à jour de statut avec le PR pour remplacer flatlist par recyclerlistview ? J'adorerais l'utiliser

Sans rapport avec ScrollView FlatList et recyclerlistview , mais quelqu'un a-t-il cherché à savoir comment le gestionnaire de gestes react-native pourrait améliorer cette bibliothèque?

À partir de la documentation:

Avec cette bibliothèque, les gestes ne sont plus contrôlés par le système de répondeur JS, mais sont à la place reconnus et suivis dans le thread d'interface utilisateur. Il rend les interactions tactiles et le suivi des gestes non seulement fluides, mais également fiables et déterministes.

Il nécessite react-native link , ce qui est malheureux pour garder cette dépendance lib gratuite. Mais il est maintenant inclus dans Expo / CRNA.

Salut @ pcooney10 ,

J'ai déjà envisagé d'implémenter un PanResponder en plus du ScrollView / FlatList un (comme vous pouvez le voir dans # 40).

Avez-vous essayé quelque chose de similaire avec react-native-gesture-handler ? J'aimerais avoir des commentaires afin de déterminer s'il s'agit d'une idée légitime ou d'une voie directe vers la folie ...

@amitassaraf Les contrats de ce composant sont très similaires à FlatList puisque les accessoires sont transmis. Pour RLV, le fournisseur de mise en page est obligatoire. Ce sera un changement radical ou nous devrons introduire un nouveau mode.

Bonjour à tous, je souhaite partager un peu de mon expérience d'utilisation de ce composant. J'avais besoin de l'utiliser dans ScrollView ce qui a généré le problème que tous les éléments seront affichés par plus que ce que vous indiquez la propriété removeClippedSubviews les éléments ne sont pas supprimés de la mémoire, sinon, chaque chemin créé de nouveaux éléments provoquant la vidange de la mémoire RAM de l' application dans ScrollView ( ou une autre liste ), utilisez les propriétés FlatList suivantes.

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

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

Selon votre cas, vous pouvez configurer les valeurs qui correspondent le mieux à vos besoins. de cette façon, vous aurez les performances attendues avec presque aucune fuite de mémoire

@ machester4 Merci d'avoir partagé vos découvertes! Ces valeurs ne conviendront pas au cas d'utilisation de tout le monde, mais l'approche est saine ;-)

Vous pouvez appliquer cette logique à vos listes horizontales qui se trouvent dans une liste verticale. dans mon cas, toutes mes listes horizontales ont 3 éléments visibles à la fois. pour cette raison, les valeurs sont de maxToRenderPerBatch et initialNumToRender sont en 4, c'est là que j'obtiens une meilleure expérience pour l'utilisateur.

@naqvitalha Pourriez-vous partager comment vous avez remplacé FlatList par RecylerView à l'intérieur du carrousel? En outre, supportez-vous quelque chose comme https://github.com/facebook/react-native/issues/20500 dans RecyclerView?

@ bd-arc Attention, je suis sûr que cela affectera les clients react-native-snap-carousel :
https://github.com/facebook/react-native/issues/21070

Merci pour le heads-up @PublicParadise!

FlatList ne s'arrête jamais d'étonner ... Il semble qu'un InteractionManager soit en cours d'exécution quelque part, retardant ainsi l'exécution de la logique du composant.

Il est certainement temps de se débarrasser de FlatList pour de bon :-)

Salut, des mises à jour sur ce domaine jusqu'à présent?

En fait, FlatList à mon avis a ce qu'il faut pour devenir un composant de liste vraiment génial.
Tout ce qui manque, c'est le concept de "hauteur de ligne estimée" que UITableView a sur iOS.
Vous n'avez donc PAS besoin d'une propriété pour "combien de lignes dois-je disposer de manière asynchrone pour faire du piratage et de la supercherie".

Tout ce dont nous avons besoin, c'est, comme je l'ai dit, d'un estimatedRowHeight (éventuellement avec rappel pour permettre différentes estimations par ligne, mais toujours des estimations!).

• Cela sera utilisé pour calculer la taille du contenu de la vue de défilement.
• Faire défiler jusqu'à un décalage fera défiler directement jusqu'à celui-ci.
• Chaque fois que vous effectuez le rendu des lignes, mettez en cache leurs tailles après leur mise en page.
• Utilisez les tailles mises en cache + les hauteurs de ligne estimées pour calculer rapidement le décalage vers un élément ou l'élément pour un décalage.
• Nous ne pouvons pas non plus considérer les estimations / caches pour toutes les lignes avant un index d'élément très élevé, utilisez simplement une sorte de taille de fenêtre et une estimation moyenne pour le reste.

Ainsi, la taille du contenu changera de manière dynamique, mais personne ne s'en souciera ou ne le ressentira, car vous pouvez faire défiler jusqu'au dernier élément ou à tout autre index et il y arrivera sans problèmes, et vous ne ferez pas autant de travail qu'il y aura éléments manquants lors du défilement.

Salut @naqvitalha , Avez-vous une succursale ou un PR sur le point de migrer une flatlist vers RLV pour ce composant? Ce sera très utile pour moi. Merci.

Merci d'avoir essayé mon composant.

Pour presque toutes les scènes, vous devriez le faire comme ceci:

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

Et assurez-vous que tous les parents de Carousel contiennent le style { flex: 1 }.

Faites attention à cette astuce:

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

LargeList ne peut pas fonctionner correctement si vous voulez que ses éléments augmentent la taille de LargeList. Vous devez confirmer que votre taille LargeList est héritée de son parent ou d'une hauteur limitée.

Pardonnez-moi pour mon anglais de piscine, si vous comprenez le chinois. Découvrez ce numéro

Le composant FlatList est tout simplement trop bogué, point final.

Ces plugins peuvent constituer un remplacement intéressant:

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

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

bien dit