react native big list
Release 1.6.1
Documentación
Esta es una vista de lista de alto rendimiento para React Native con soporte para diseños complejos que utiliza un uso similar de lista plana para facilitar el reemplazo. La implementación de esta lista para la lista de la lista grande en React Native Works con un reciclador centrado en el uso y el uso de la memoria, por lo que permite procesar miles de elementos en la lista.
También puede probarlo en la aplicación web publicada: demostración
La lista plana de React Native es excelente, pero cuando se trata de grandes listas tiene algunos defectos debido a su almacenamiento en caché de elementos. Existe algunas alternativas como react-native-largelist y recyclerlistview , pero ambos tienen algunos problemas.
La react-native-largelist no es compatible con la web y la exposición, tiene un código nativo que a veces necesitan ser reajustados y mantenidos, tienen un elemento de lista extraño (porque nunca tiene elementos en blanco), necesita una reestructuración de datos y tiene algunos problemas al tratar de procesar muchos datos (por ejemplo: 100,000 elementos) porque liberaría la CPU.
recyclerlistview es un rendimiento, pero sufre de un marco vacío en las posiciones de desplazamiento extrañas cuando se trata de desplazarse a un elemento en el montaje, y la implementación de encabezados pegajosos entra en conflicto con Animated .
Recycler hace que sea fácil mostrar eficientemente grandes conjuntos de datos. Usted suministra los datos y define cómo se ve cada elemento, y la biblioteca Recycler crea dinámicamente los elementos cuando son necesarios. Como su nombre lo indica, el reciclador recicla esos elementos individuales. Cuando un elemento se desplaza de la pantalla, el reciclador no destruye su vista. En cambio, el Recycler reutiliza la vista de nuevos elementos que se han desplazado en la pantalla. Esta reutilización mejora enormemente el rendimiento, mejora la capacidad de respuesta de su aplicación y reduce el consumo de energía.
Cuando la lista no puede renderizar sus artículos lo suficientemente rápido, los componentes no renderizados aparecerán como espacio en blanco.
Esta biblioteca es completamente nativa, por lo que es compatible con todas las plataformas disponibles: Android, iOS, Windows, MacOS, Web y Expo .
Instale la biblioteca desde NPM o el hilo que solo ejecuta una de las siguientes líneas de comando:
| npm | hilo |
|---|---|
npm install react-native-big-list --save | yarn add react-native-big-list |
Lea también cómo migrar desde la lista plana
Ejemplo básico:
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 } /> ;
} ; Para obtener más ejemplos, verifique el directorio example el directorio list o verifique la documentación
| Biglist vs Flatlist | Lista de secciones |
|---|---|
 |  |
Clon o descargar repo y después:
cd Example
yarn install # or npm install
expo start Abra el cliente de Expo en su dispositivo. Úselo para escanear el código QR impreso por expo start . Es posible que tenga que esperar un minuto mientras su proyecto se agrupa y carga por primera vez.
También puede probarlo en la aplicación web publicada: demostración
La lista tiene los mismos accesorios de ScrollView además de sus accesorios y métodos específicos.
¿Tienes una idea? Encontrado un error? Aumente a problemas o retire la solicitud. ¡Las contribuciones son bienvenidas y son muy apreciadas! Cada poquito ayuda, y el crédito siempre se dará.
