recyclerlistview
Version 4.2.1
Si este proyecto lo ha ayudado, ¿nos apoya con una estrella?
Esta es una View de alto rendimiento para React Native y Web con soporte para diseños complejos. JS solo sin dependencias nativas, inspiradas en RecyclerView en Android y UicollectionView en iOS.
npm install --save recyclerlistview
Para la última versión beta:
npm install --save recyclerlistview@beta
Nota: La documentación se actualizará pronto, por ahora verifique los comentarios del código para obtener claridad y explorar funciones. Este componente también se prueba activamente con React Native Web también.
RecyclerListView utiliza "reciclaje de células" para reutilizar vistas que ya no son visibles para hacer elementos en lugar de crear nuevos objetos de vista. La creación de objetos es muy costosa y viene con una sobrecarga de memoria, lo que significa que mientras se desplaza a través de la lista, la huella de memoria sigue subiendo. Liberar elementos invisibles de la memoria es otra técnica, pero eso lleva a la creación de aún más objetos y muchas colecciones de basura. El reciclaje es la mejor manera de representar listas infinitas que no comprometen el rendimiento o la eficiencia de la memoria.
Además de todos los beneficios de rendimiento, RecyclerListView viene con excelentes características de la caja:
forceNonDeterministicRendering )RecyclerListView se construyó teniendo en cuenta el rendimiento, lo que significa que no hay espacios en blanco, mientras que los pergaminos rápidos o las caídas de marco. RecyclerListView lo alienta a tener alturas deterministas para los artículos que necesita representar. Esto no significa que necesite tener todos los elementos de la misma altura y cosas, todo lo que necesita es una forma de mirar los datos y calcular la altura por adelantado para que RecyclerListView pueda calcular el diseño de una pasada en lugar de esperar a que ocurra el sorteo. Todavía puede hacer todo tipo de vistas de cuadrícula y visiones de lista con diferentes tipos de elementos que se reciclan de manera óptima. El reciclaje basado en el tipo es muy fácil de hacer y sale de la caja.
En caso de que no pueda determinar las alturas de los elementos por adelantado, solo configure forceNonDeterministicRendering Prop para verdadero en RecyclerListView. Ahora, tratará las dimensiones dadas como estimaciones y dejará cambiar el tamaño de los elementos. Trate de dar buenas estimaciones para mejorar la experiencia.
Production Flipkart Grocery Demo Video (o prueba la aplicación): https://youtu.be/6yqeqp3mmou
Cambio de carga/vista infinita (expo): https://snack.expo.io/@naqvitalha/rlv-demo
Vistas mixtas: https://snack.expo.io/b1gyad52b
ExtendedState, stableids y itemanimator (expo): https://snack.expo.io/@arunreddy10/19bb8e
Proyecto de muestra: https://github.com/naqvitalha/travelMate
Muestra web (usando RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
Muestra de preservación de contexto: https://github.com/naqvitalha/recyclerlistview-context-preservation-demo
Otro video: https://www.youtube.com/watch?v=tnv4hmmpgmc
| Apuntalar | Requerido | Tipo de parámetros | Descripción |
|---|---|---|---|
| LayoutProvider | Sí | BaselayoutProvider | Función de constructor que define el diseño (altura / ancho) de cada elemento |
| dataprovider | Sí | Dataprovider | Función del constructor La define los datos para cada elemento |
| ContextProvider | No | ContextProvider | Se utiliza para mantener la posición de desplazamiento en caso de que la vista se destruya, lo que a menudo sucede con la navegación posterior |
| hilera | Sí | (Tipo: Cadena | Número, datos: Any, índice: número) => JSX.Element | JSX.Element [] | nulo | Método que devuelve el componente React para ser representado. Obtiene el tipo, los datos, el índice y el estado extendido de la vista en la devolución de llamada |
| InitialOffset | No | número | Compensación inicial desde la que desea comenzar a representar; Esto es muy útil si desea mantener el contexto de desplazamiento en las páginas. |
| renderaHeadoffset | No | número | Especifique cuántos píxeles de anticipación desea que se presenten las opiniones. Aumentar este valor puede ayudar a reducir los espacios en blanco (si los hay). Sin embargo, mantener esto lo más bajo posible debería ser la intención. Los valores más altos también aumentan el compute de re-render |
| ishorizontal | No | booleano | Si es cierto, la lista funcionará horizontalmente en lugar de verticalmente |
| inscroll | No | RawEvent: Scrollevent, OffSetX: Number, Offsety: Number) => Void | En la función de devolución de llamada de desplazamiento que se ejecuta como un usuario Scrolls |
| enriquecer | No | (Params: onRECREAteParams) => Void | función de devolución de llamada que se ejecuta al recrear la vista Recycler desde el proveedor de contexto |
| EXTERSALSCROLLVIEW | No | {New (Props: ScrollViewDefaultProps): BasesCrollView} | Use esto para aprobar su implementación de BasesCrollView |
| Onendreached | No | () => nulo | Función de devolución de llamada ejecutada cuando se presiona el final de la vista (menos OnEdthreshold si se define) |
| Onendreached Thriscold | No | número | Especifique cuántos píxeles de anticipación para la devolución de llamada OnEdReached |
| OnEdreachedThressholdrelativo | No | número | Especifique qué tan lejos del final (en unidades de longitud visible de la lista), el borde inferior de la lista debe estar desde el final del contenido para activar la devolución de llamada OnEdReached |
| OnvisibleDices Changed | No | Tonitemstatuschanged | Proporciona índice visible; útil para enviar eventos de impresión |
| onvisibleindexeschanged | No | Tonitemstatuschanged | (Deprecido en 2.0 beta) proporciona un índice visible; útil para enviar eventos de impresión |
| Renderfooter | No | () => JSX.Element | JSX.Element [] | nulo | Proporcione este método si desea representar un pie de página. Útil para mostrar un cargador mientras realiza cargas incrementales |
| InitialrenderIndex | No | número | Especifique el índice inicial del elemento que desea que se inicie. Preferido a través de InitialOffset si ambos se especifican |
| desplazamiento | No | número | solo iOS; Duración del acelerador de desplazamiento |
| cancelizar | No | booleano | Especifique si el tamaño puede cambiar |
| Distancia a partir de la luz | No | número | (Deprimido) Use APIA applyWindowCorrection() con windowShift . ¿Uso? |
| AplicarwindowCorrection | No | (Offset: Número, WindowCorrection: WindowCorrection) => void | (Mejora/reemplazo a la API distanceFromWindow ) permite la actualización de los borde de la ventana visible en función de los valores correccionales pasados. El usuario puede especificar WindowPhift ; En caso de que RecyClerListWindow necesite desplazarse hacia abajo/hacia arriba, StartCorrection ; En caso de que cuando el límite de la ventana superior se debe cambiar para que la ventana Top Top Bound se desplaza hacia abajo, un contenido se superponga al borde superior de RecyclerListView, EndCorrection : altere la ventana inferior vinculada a un caso de uso similar. ¿Uso? |
| useWindowscroll | No | booleano | Solo web; Elementos de diseño en la ventana en lugar de un div desplazable |
| desactivador | No | booleano | Apaga el reciclaje |
| forterminista | No | booleano | El valor predeterminado es falso; Si las dimensiones habilitadas proporcionadas en el proveedor de diseño no se aplicarán estrictamente. Use esto si las dimensiones del elemento no se pueden determinar con precisión |
| Estado extendido | No | objeto | En algunos casos, los datos aprobados en el nivel de fila pueden no contener toda la información de la que depende el elemento, puede mantener toda la otra información afuera y pasarla a través de este accesorio. Cambiar este objeto hará que todo vuelva a renderizar. Asegúrese de no cambiarlo a menudo para garantizar el rendimiento. Los re-renderos son pesados. |
| itemanimator | No | Itemanimator | Habilita la animación de las celdas de elementos recyclerListView (cambiar, agregar, eliminar, etc.) |
| estilo | No | objeto | Pasar el estilo a la vista de desplazamiento interno |
| scrollviewprops | No | objeto | Para todos los accesorios que deben ser proxenados a ScrollView interno/externo. Ponlos en un objeto y se extenderán y pasarán. |
| diseño de diseño | No | Dimensión | Evitará el render vacío inicial requerido para calcular el tamaño de ListView y use estas dimensiones para representar los elementos de la lista en el primer renderizado. Esto es útil para casos como la representación del lado del servidor. El PROP Sangesize debe establecerse en verdadero si el tamaño se puede cambiar después de la representación. Tenga en cuenta que este no es el tamaño de la vista de desplazamiento y se usa únicamente para diseñar. |
| OnitemLayout | No | número | Una función de devolución de llamada que se ejecuta cuando un elemento de RecyClerListView (en un índice) ha sido el diseño. Esto también se puede utilizar como un tipo de devoluciones de llamada. |
| WindowCorrectionConfig | No | objeto | Se utiliza para especificar la configuración de corrección de ventanas IS y si debe aplicarse a algunos eventos de desplazamiento |
Para el conjunto completo de funciones, eche un vistazo a las definiciones de PROP de RecyClerListView (abajo del archivo). Todas las características ScrollView como RefreshControl también funcionan fuera de la caja.
applyWindowCorrection se usa para alterar los límites de la ventana visible del recyclerListView dinámicamente. La WindowCorrection de RecyClerListView junto con el desplazamiento de desplazamiento actual se expone al usuario. El objeto windowCorrection consta de 3 valores numéricos:
windowShift : reemplazo directo del parámetro distanceFromWindow el parámetro de Awindow. Window Shift es el valor de desplazamiento por el cual recyClerListView en su conjunto se desplaza dentro del StickyContainer, use este parámetro para especificar qué tan lejos está el primer elemento de la lista desde la parte superior de la ventana. Este valor corrige las compensaciones de desplazamiento para StickyObjects y recyclerListView.startCorrection : StartCorrection se usa para especificar el cambio en el límite de la ventana visible superior, con el cual el usuario puede recibir la instancia correcta de encabezado adhesivo incluso cuando un factor externo como CoordinatorLayout Barra de herramientas.endCorrection : la corrección final se usa para especificar el cambio en el límite de la ventana visible inferior, con la cual el usuario puede recibir una instancia de pie de página adhesiva correcta cuando un factor externo como la barra de aplicación inferior está cambiando el límite de la vista visible.Como se ve en el ejemplo a continuación
TypeScript funciona fuera de la caja. La única ejecución es con los accesorios de ScrollView heredados. Para que TypeScript funcione con los accesorios de ScrollView hereditarios, debe colocar los accesorios de ScrollView hereditarios dentro del Prop. ScrollViewProps.
< 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" . Use alias si desea preservar la ruta de importación. Solo el código específico de la plataforma es parte de la compilación, por lo que no se enviará un código innecesario con su aplicación.requestAnimationFrame , ResizeObserver Apache v2.0
Abra los problemas para cualquier error que encuentre. Puede comunicarse conmigo en Twitter @naqvitalha o escribir en [email protected] para cualquier pregunta que pueda tener.
