React-native-snap-carousel: ¿Reemplazar FlatList con otro componente?

Dos grandes inconvenientes:

• El primero extiende un ScrollView .
• El segundo es un complemento nativo, pero no implementa las características faltantes de FlatList que mejorarían enormemente el carrusel (duración del desplazamiento, devolución de llamada del desplazamiento ...).

Francamente, encuentro FlatList inutilizable. Mi solución para react-native-snap-carousel (que me encanta, por cierto) es establecer initialNumToRender en data.length . Esa es la única forma de obtener una versión sin errores.
Este es un fragmento de mi secuencia de comandos posterior a la instalación:

# 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

Ahora, sería bueno si react-native-snap-carousel admitiera una función que me permitiera configurar initialNumToRender desde afuera para no tener que parchear Carousel.js más.
También diría que Carousel.js podría querer establecer initialNumToRender en data.length de forma predeterminada si el número esperado de elementos es inferior a 100 (probablemente el 90% de todos los casos de uso).

De las dos bibliotecas que encontró arriba, encuentro react-native-largelist muy intrigante. ¿Sería posible solucionar las características que faltan, o quizás convencer al autor de que las agregue?

Hola @PublicParadise ,

Bueno, initialNumToRender es parte de los accesorios reemplazables, por lo que debería poder usar <Carousel initialNumToRender={data.length} /> sin necesidad de un parche ;-) Puedo garantizar que funciona, ya que lo probé en # 235.

Pero si tiene que hacer eso y, por lo tanto, está listo para olvidarse de las optimizaciones de rendimiento que se supone que vienen con FlatList , le recomendaría simplemente establecer useScrollView en true . Recientemente introduje este accesorio con este tipo de casos de uso en mente y para evitar por completo el error FlatList . Además, permite introducir características asombrosas como esta : p

Con respecto a los dos complementos que estoy considerando, primero necesito ejecutar muchas pruebas. ¡Definitivamente ayudaría si podemos convencer al autor de react-native-largelist para implementar las características que faltan pero son necesarias!

Tenga en cuenta que, por el momento, no me siento seguro de basar mi propio complemento en uno nativo, ya que no podría mantenerlo si el autor deja de hacerlo (mientras que no tendría ningún problema en asumir el control de uno de JS).

Hola @ bd-arc,

Gracias por los consejos. Para ser honesto, me frustré tanto con FlatList que coloqué el truco y nunca volví a tocar el componente. En aquel entonces, initialNumToRender no era un accesorio reemplazable y useScrollView parece aún mejor.

Parece que FlatList tiene una dependencia extraña con Animated . Probablemente ahí es donde la mayoría de la gente tiene problemas. Hace apenas 6 días, alguien presentó un nuevo error al respecto.

Yo mismo también estaba buscando reemplazar FlatList e investigué un poco. La creación de listas de ventanas y la representación de lo que está a la vista no parece considerarse un problema difícil. Me gustaron más las soluciones RxJS / most.js.

¿Tuvo suerte implementando una de esas dos soluciones como reemplazo?

No, solo hice la investigación. En aquel entonces todavía esperaba que eventualmente arreglaran FlatList .
Permítanme compartir algunos enlaces de mi investigación:

• Desplazamiento infinito ingenuo en programación reactiva usando RxJS Observables
• Utilice RxJS con React
• Reciclaje de filas para vistas de listas nativas de React de alto rendimiento
• Reaccionar experimentos nativos de ListView
• Desplazarse por la tabla usando cycle.js
• Cree una lista de desplazamiento infinita con Bacon.js
• Traducción aproximada de infinite-bacon a rxjs

Pero tengo la sensación de que el complemento nativo ( react-native-largelist ) es el camino correcto.

Gracias por compartir su investigación 👍

Para ser honesto, no tengo tiempo ahora para poner todo esto a prueba. Si tiene ganas de sumergirse en react-native-largelist , sería de gran ayuda. Si no, asegurémonos de mantenernos informados ;-)

Actualización: mientras buscaba esos enlaces me di cuenta de que Tal Kol de wix.com tiene un blog Medium realmente bueno. Hasta ahora me gustan todos sus artículos. Este también podría ser relevante para nuestra discusión:

• Rendimiento de React Native ListView revisado: reciclaje sin el puente
• BindingListView: implementación experimental de React Native ListView que admite el enlace de vista directa

@ bd-arc Lo mismo, tengo un trabajo diario bastante exigente y mi tiempo y recursos son limitados.
Podría mirar el BindingListView . Pero sí: mantengámonos informados :)

Sí, Tal Kol ha escrito algunos artículos de alta calidad sobre React Native y optimización del rendimiento.

Además, estaba particularmente interesado en el complemento de Wix react-native-interactable , pero desafortunadamente no han tenido tiempo últimamente para abordar algunos problemas molestos.

@ bd-arc ¿Cuál es el problema con recyclerlistview extendiendo ScrollView ? Tanto large-list como FlatList basan en lo mismo.
Escribí recyclerlistview y recientemente mi equipo usó este componente de carrusel. Cambiamos FlatList con recyclinglistview y funciona muy bien.

Hola @naqvitalha , ¡gracias por brillar!

Desde mi experiencia, y hasta ahora, todo lo que se basa en ScrollView muestra en última instancia limitaciones de rendimiento cuando hay una gran cantidad de elementos que manejar y / o limitaciones de funciones. Pero tenga la seguridad de que mi objetivo es demostrar que estoy equivocado ;-)

¿Estaría interesado en enviar un PR para esta evolución para que pueda ser probado amplia y exhaustivamente?

@ bd-arc Seguro. Dejame hacer eso.

@naqvitalha @ bd-arc ¿Alguna actualización de estado con el RP para reemplazar flatlist con recyclerlistview ? Me encantaría usarlo

No relacionado con ScrollView FlatList y recyclerlistview , pero ¿alguien ha investigado cómo react-native-gest-handler podría mejorar esta biblioteca?

De los documentos:

Con esta biblioteca, los gestos ya no están controlados por el sistema de respuesta JS, sino que se reconocen y se rastrean en el hilo de la interfaz de usuario. Hace que las interacciones táctiles y el seguimiento de gestos no solo sean fluidos, sino también confiables y deterministas.

Requiere react-native link , lo cual es desafortunado en términos de mantener libre esta dependencia de lib. Pero ahora está incluido en Expo / CRNA.

Hola @ pcooney10 ,

Anteriormente, consideré implementar un PanResponder además del ScrollView / FlatList one (como puede ver en el # 40).

¿Has probado algo similar con react-native-gesture-handler ? Me encantaría recibir comentarios para determinar si esta es una idea legítima o un camino directo a la locura ...

@amitassaraf Los contratos de este componente son muy similares a FlatList ya que los accesorios se transmiten. Para el proveedor de diseño RLV es obligatorio. Será un cambio importante o tendremos que introducir un nuevo modo.

Hola a todos, quiero compartir un poco de mi experiencia con este componente. Necesitaba usarlo dentro de ScrollView que generó el problema de que todos los elementos se mostrarán con más de lo que indicaría la propiedad removeClippedSubviews los elementos no se eliminan de la memoria, de lo contrario, cada ruta creó nuevos elementos que hacen que la aplicación agote la memoria RAM en Android Para obtener un funcionamiento correcto de la lista dentro de una ScrollView ( u otra lista ) utilice las siguientes propiedades FlatList .

maxToRenderPerBatch={4}

initialNumToRender={4}

windowSize={4}

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

Según tu caso, puedes configurar los valores que mejor se adapten a tus necesidades. de esta forma tendrás el rendimiento esperado casi sin pérdida de memoria

@ machester4 ¡ Gracias por compartir sus hallazgos! Esos valores no se ajustarán al caso de uso de todos, pero el enfoque es sólido ;-)

Puede aplicar esa lógica a sus listas horizontales que están dentro de una lista vertical. en mi caso, todas mis listas horizontales tienen 3 elementos visibles a la vez. por esa razón los valores son de maxToRenderPerBatch y initialNumToRender están en 4 que es donde obtengo una mejor experiencia para el usuario.

@naqvitalha ¿Podrías compartir cómo reemplazaste FlatList con RecylerView dentro del carrusel? Además, ¿admite algo como https://github.com/facebook/react-native/issues/20500 en RecyclerView?

@ bd-arc Atención, estoy bastante seguro de que esto afectará a los clientes de react-native-snap-carousel :
https://github.com/facebook/react-native/issues/21070

¡Gracias por el aviso @PublicParadise!

FlatList nunca deja de sorprender ... Parece que un InteractionManager podría estar ejecutándose en alguna parte, posponiendo así la ejecución de la lógica del componente.

Definitivamente es hora de deshacerse de FlatList para siempre :-)

Hola, ¿alguna actualización en este campo hasta ahora?

En realidad, FlatList en mi opinión tiene lo que se necesita para convertirse en un gran componente de lista.
Todo lo que falta es el concepto de "altura de fila estimada" que tiene UITableView en iOS.
Por lo tanto, NO necesita una propiedad para "cuántas filas debería distribuir de forma asincrónica para hacer algunos trucos y trucos".

Todo lo que necesitamos es, como dije, un estimatedRowHeight (posiblemente con devolución de llamada para permitir diferentes estimaciones por fila, ¡pero aún así estimaciones!).

• Esto se utilizará para calcular el tamaño del contenido de la vista de desplazamiento.
• Al desplazarse a un desplazamiento, se desplazará directamente a él.
• Siempre que renderice filas, almacene en caché sus tamaños después de que se hayan distribuido.
• Utilice tamaños almacenados en caché + alturas de fila estimadas para calcular rápidamente el desplazamiento de un elemento, o el elemento para un desplazamiento.
• Tampoco podemos considerar estimaciones / cachés para todas las filas antes de un índice de elementos muy alto, solo use algún tipo de tamaño de ventana y una estimación promedio para el resto.

Por lo tanto, el tamaño del contenido cambiará dinámicamente, pero a nadie le importará ni lo sentirá, ya que puede desplazarse hasta el último elemento o cualquier otro índice y llegará allí sin fallas, y no estará haciendo tanto trabajo que habrá elementos faltantes mientras se desplaza.

Hola @naqvitalha , ¿Tiene alguna sucursal o RP a punto de migrar la lista plana a RLV para este componente? Será muy útil para mi. Gracias.

Gracias por probar mi componente.

Para casi todas las escenas, debería hacerlo así:

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

Y asegúrese de que todos los padres de Carousel contengan el estilo { flex: 1 }.

Preste atención a este consejo:

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

LargeList no puede funcionar bien si desea que sus elementos apoyen el tamaño de LargeList. Debe confirmar que el tamaño de LargeList se hereda de su padre o una altura limitada.

Perdóname por mi inglés de piscina, si entiendes chino. Mira este problema

El componente FlatList es demasiado defectuoso, punto.

Estos complementos pueden constituir un reemplazo interesante:

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

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

bien dicho