VISTA DE CUADRÍCULA RECEPTIVA PARA REACT NATIVE

Vista de cuadrícula receptiva para React Native

React Native Super Grid Vista de cuadrícula de respuesta para React Native.

Empezando

Esta biblioteca exporta dos componentes: FlatGrid (similar a FlatList) y SectionGrid (similar a SectionList). Ambos componentes representan un diseño de cuadrícula que se adapta a varias resoluciones de pantalla.

En lugar de pasar un argumento itemPerRow, pasa itemDimension y cada elemento se renderizará con un tamaño de dimensión igual o superior (para llenar la pantalla) de la dimensión dada.

empresa de desarrollo de aplicaciones de fitness

Internamente, estos componentes utilizan el nativo FlatList y SectionList .

Versión 2.xy anterior, consulte rama v2 para documentación

Instalando

Puede instalar el paquete a través de npm.

donde encontrar solanio

|_+_|

Uso (FlatGrid)

|_+_| |_+_|

Uso (SectionGrid)

|_+_| |_+_|

Propiedades

Propiedad	Escribe	Valor por defecto	Descripción
renderItem	Función		Función para renderizar cada objeto. Debería devolver un componente nativo de reacción. Misma firma que la del renderItem de FlatList / SectionList (con una clave adicional `npm install react-native-super-grid` ).
elementos (para FlatGrid) secciones (para SectionGrid)	Formación		Elementos a renderizar. renderItem se llamará con cada elemento de esta matriz. Misma firma que la de FlatList / SectionList.
itemDimension	Número	120	Ancho o alto mínimo para cada elemento en píxeles (virtual).
reparado	Booleano	falso	Si es verdadero, el `import { FlatGrid } from 'react-native-super-grid';` exacto \| se utilizará y no se ajustará para adaptarse a la pantalla.
espaciado	Número	10	Espaciado entre cada elemento.
estilo	FlatList estilos (objeto)		Estilos para el contenedor. Los estilos de un elemento deben aplicarse dentro de `({item})} />` .
itemContainerStyle	estilos (objeto)		Estilo para el contenedor del artículo. No es necesario para la mayoría de los casos.
staticDimension	Número	indefinido	Especifica un ancho o alto estático para el contenedor. Si no se aprueba, se utilizará el ancho / alto completo de la pantalla.
horizontal	booleano	falso	Si es verdadero, la cuadrícula se desplazará horizontalmente. Si desea que su artículo llene la altura cuando utilice una cuadrícula horizontal, debe asignarle una altura de '100%'. Este accesorio no afecta a SectionGrid, que solo se desplaza verticalmente.
onLayout	Función		Devolución de llamada opcional ejecutada por el interno `import { SectionGrid } from 'react-native-super-grid';` o `({item})} renderSectionHeader={({ section }) => ( {section.title} )} />` `rowIndex` función, por lo que se invoca en cambios de montaje y diseño.
listKey	Cuerda	indefinido	Un identificador único para Grid. Esta clave es necesaria si está anidando varios FlatGrid / SectionGrid dentro de otro Grid (o cualquier VirtualizedList).

Todos los accesorios adicionales que pase se pasarán a la FlatList / SectionList interna. Esto significa que puede hacer uso de varios accesorios y métodos como itemDimension, renderItem, FlatList… etc. Si bien estos no se prueban para su compatibilidad, la mayoría de ellos deberían funcionar como se espera.

En SectionGrid , SectionList argumento en métodos como onLayout, ListHeaderComponent, onEndReached será ligeramente diferente de la sección real que pasó. El onRefresh clave en el section serán las versiones agrupadas de elementos (elementos que van en una fila), y la lista original de elementos se puede encontrar en renderSectionHeader llave. Todas las demás claves permanecerán intactas.

Migración v2 a v3

El principal cambio de API en v3 fue cambiar el nombre de los componentes a renderSectionFooter y ItemSeparatorComponent y haciendo el data firma para que coincida con section y originalData.

Entonces en lugar de

|_+_|

usar