Reemplacemos el contenido de la pantalla ficticia de categorías aquí con una cuadrícula de categorías porque esa es la idea detrás de
esta pantalla después de todo. Ahora para eso,
podemos usar un componente que usamos antes y esa es la FlatList.
Hasta ahora, hemos utilizado eso para listas normales, en
realidad también puede renderizar cuadrículas con eso y eso es exactamente lo que haremos aquí.
Ahora, para eso, en esta pantalla de categoría, reemplazaré todo con FlatList aquí y solo mostraré mi lista plana aquí en esta pantalla, que devolveré
al
final y estableceré num columnas aquí, que es una nueva propiedad que no hemos visto antes a 2
y esto define cuántas columnas queremos tener. El valor predeterminado es 1, que es una
lista normal, pero puede tener más de una columna allí y esto le proporciona una cuadrícula de manera efectiva.
Ahora con eso, podríamos renderizar
una cuadrícula, pero por supuesto necesitamos algunos datos
para eso, de lo contrario es difícil renderizar una cuadrícula, ¿verdad?
Para eso, agregaré una nueva carpeta que nombraré datos y allí agregaré datos ficticios. js porque al final, solo proporciono
algunos datos ficticios que estoy suministrando aquí, no estamos
cargando esto desde un servidor o algo así en este momento, solo cárguelo de esta manera.
Quiero tener un montón de categorías allí y para esto, agregaré otra carpeta que denomino modelos, que al
final es una carpeta donde quiero definir cómo se forman mis datos en esta aplicación, cómo se
ve .
Entonces, podemos agregar una categoría. js, por ejemplo, y en este archivo,
todo lo que quiero tener es una clase que nombraré categoría y las clases son características predeterminadas de
Javascript en Javascript moderno que exporto y allí simplemente definiré cómo debe verse un objeto de categoría en mi aplicación como, de
modo que básicamente tengamos una forma más fácil de crear estos objetos sin escribir mal, etc.
Entonces, aquí, esta clase de categoría tomará un constructor y puede usar este constructor, que es un método predeterminado
que puede
agregar a cualquier clase en Javascript para inicializar un objeto basado en esta clase.
Haces esto esperando algunos argumentos aquí en el constructor y para una categoría, quiero obtener un ID
para la categoría, un título y un color que usaré como color de fondo en la cuadrícula para este elemento de cuadrícula para
esta categoría y almacenaré todos estos
datos en propiedades con la ayuda de esta palabra clave. En caso de que esto sea
totalmente nuevo para usted, primero sumérjase en algunos cursos o recursos de Javascript porque esto no
tiene nada que ver con React navigation o
con React Native, este es el Javascript moderno de vainilla.
Ahora, ¿por qué creé esto?
Porque ahora puedo importar mi clase de categoría desde la carpeta de modelos, desde la categoría. js en el archivo de datos ficticios y
luego úselo para crear algunos datos ficticios.
Ahora encontrará los datos ficticios adjuntos, adjunto encontrará el archivo Javascript con estas categorías ficticias que almaceno en una constante
que luego exporto como una exportación con nombre aquí.
Estos son algunos datos de categoría ficticios para las categorías en esta aplicación, en estas
categorías que quiero tener en esta aplicación. Estas son las categorías que usaré
en esta aplicación y estas son las categorías que ahora podemos usar dentro de nuestras pantallas, para ser precisos.
Entonces, allí, quiero agregar una importación e importar categorías de datos / datos ficticios, así que eso es importar esa
constante nombrada que estamos exportando allí.
Ahora bien, este es un conjunto de objetos Javascript al final, ¿verdad?
Eso es lo que almacenamos
allí, es solo una matriz de objetos Javascript que ahora podemos usar para representar nuestra lista o, para ser precisos,
nuestra cuadrícula aquí.
Por lo tanto, los datos para esta FlatList son simplemente mis matrices de categorías, por lo que solo apuntaré a las categorías
y, por supuesto, ahora también necesitamos un elemento de representación para definir cómo se debe representar un solo elemento
de cuadrícula, qué componente se debe representar allí. Para esto, agregaré una nueva función aquí, renderizar elemento
de cuadrícula, que es una función que recibirá algunos datos de elemento al final aquí y que debería devolver
un elemento jsx, debería devolver algún componente
React aquí y apuntaré a la cuadrícula de representación artículo aquí Ahora allí, renderizaré una vista y para simplificar las cosas, por ahora esta será una vista
con un texto allí y en ese texto, quiero renderizar itemData.
elemento, eso es lo que tenemos
disponible en una FlatList si recuerda módulos anteriores, el objeto de datos del elemento aquí tiene una
propiedad de elemento, React Native FlatList le brinda esta propiedad y allí tendremos una propiedad de título porque un elemento que estamos llegar
aquí es solo una categoría que obtenemos de nuestros datos que estamos ingresando en la FlatList, por lo que tendremos
un objeto Javascript como elemento allí y este objeto Javascript se
basa en nuestro modelo aquí y allá, configuramos un título, un color y una propiedad de ID, por lo tanto,
tenemos una
propiedad de título, por lo tanto, podemos extraer el título aquí de esta manera, usaremos el color más adelante.
Así que eso
es lo primero, esto debería funcionar. Ahora, en las nuevas versiones de
React Native, tampoco es necesario que informe a React Native que su ID no se llama clave, sino que en realidad se llama ID
porque las versiones más recientes de React Native también aceptan ID como ID en los datos de la lista.
Si desea seguir en una versión anterior, necesitaría agregar un extractor de claves aquí, que es una función que obtiene el
elemento y el índice y necesita devolver el valor que debería usarse como clave, por lo que en este caso eso
sería ser artículo id, una vez
más, las versiones más nuevas de React Native no necesitan esto, pero solo como referencia y para
versiones anteriores, todavía agregaré esto aquí.
Entonces ahora devolvemos nuestra FlatList aquí con nuestros datos.
Si ahora guardamos esto, ya deberíamos ver nuestros datos
aquí, por supuesto, no es realmente tan hermoso sino
una cuadrícula, tenemos hamburguesas
italianas, al lado rápidas y fáciles, al lado
alemanas, simplemente no parece una cuadrícula pero técnicamente lo es.
Ahora, para que se vea un poco más como una cuadrícula, por supuesto, necesitamos agregar más estilo. Ahora, para cambiar un poco ese estilo, podemos ir a nuestros elementos
de cuadrícula
aquí, a un elemento de cuadrícula simple y agregar el accesorio de estilo aquí y agregar el estilo del elemento de cuadrícula o
lo que quieras nombrar y
luego, allí abajo, agregaré elemento de cuadrícula a mi hoja de estilo y le doy esta propiedad de flex, queremos ocupar todo
el espacio que pueda,
guardar esto, ahora esto se parece un poco más a una cuadrícula.
Ahora, un margen alrededor de cada elemento también sería
bueno, por lo que para eso solo podemos agregar margen y tal vez agregar 15 como margen alrededor de cada elemento, para que tengamos
más espacio en todas las
direcciones y con eso, no es tan
malo, por supuesto ahora también podemos cambiar el aspecto general y, por ejemplo, dar a cada elemento
una altura de digamos 150 y depende totalmente de usted qué valores elija allí, pero diría que con eso,
es una cuadrícula bastante
agradable,
ciertamente no gana un premio de estilo todavía, pero vamos en la dirección correcta.
Ahora, antes de terminar el estilo de esto y definitivamente tenemos algo de trabajo por hacer para eso, asegurémonos
de que podemos tocar estos elementos y luego vamos a la pantalla de detalles para ese elemento específico nuevamente, por
lo tanto, veamos también cómo podemos en realidad establece un título en el encabezado para que tengamos una
mejor idea de dónde estamos actualmente.