1 00:00:02,470 --> 00:00:09,580 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 2 00:00:09,580 --> 00:00:13,090 esta pantalla después de todo. Ahora para eso, 3 00:00:13,090 --> 00:00:18,140 podemos usar un componente que usamos antes y esa es la FlatList. 4 00:00:18,160 --> 00:00:20,980 Hasta ahora, hemos utilizado eso para listas normales, en 5 00:00:20,980 --> 00:00:25,490 realidad también puede renderizar cuadrículas con eso y eso es exactamente lo que haremos aquí. 6 00:00:25,730 --> 00:00:34,960 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é 7 00:00:34,960 --> 00:00:35,530 al 8 00:00:35,530 --> 00:00:42,520 final y estableceré num columnas aquí, que es una nueva propiedad que no hemos visto antes a 2 9 00:00:42,520 --> 00:00:47,950 y esto define cuántas columnas queremos tener. El valor predeterminado es 1, que es una 10 00:00:47,950 --> 00:00:53,610 lista normal, pero puede tener más de una columna allí y esto le proporciona una cuadrícula de manera efectiva. 11 00:00:53,620 --> 00:00:55,080 Ahora con eso, podríamos renderizar 12 00:00:55,090 --> 00:00:57,070 una cuadrícula, pero por supuesto necesitamos algunos datos 13 00:00:57,070 --> 00:00:59,640 para eso, de lo contrario es difícil renderizar una cuadrícula, ¿verdad? 14 00:01:00,590 --> 00:01:06,290 Para eso, agregaré una nueva carpeta que nombraré datos y allí agregaré datos ficticios. js porque al final, solo proporciono 15 00:01:06,290 --> 00:01:10,040 algunos datos ficticios que estoy suministrando aquí, no estamos 16 00:01:10,040 --> 00:01:16,740 cargando esto desde un servidor o algo así en este momento, solo cárguelo de esta manera. 17 00:01:16,920 --> 00:01:23,340 Quiero tener un montón de categorías allí y para esto, agregaré otra carpeta que denomino modelos, que al 18 00:01:23,520 --> 00:01:29,550 final es una carpeta donde quiero definir cómo se forman mis datos en esta aplicación, cómo se 19 00:01:29,550 --> 00:01:30,440 ve . 20 00:01:30,450 --> 00:01:36,810 Entonces, podemos agregar una categoría. js, por ejemplo, y en este archivo, 21 00:01:36,840 --> 00:01:43,920 todo lo que quiero tener es una clase que nombraré categoría y las clases son características predeterminadas de 22 00:01:44,040 --> 00:01:52,800 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 23 00:01:52,920 --> 00:01:59,110 modo que básicamente tengamos una forma más fácil de crear estos objetos sin escribir mal, etc. 24 00:01:59,130 --> 00:02:05,670 Entonces, aquí, esta clase de categoría tomará un constructor y puede usar este constructor, que es un método predeterminado 25 00:02:05,700 --> 00:02:06,610 que puede 26 00:02:06,630 --> 00:02:11,790 agregar a cualquier clase en Javascript para inicializar un objeto basado en esta clase. 27 00:02:12,000 --> 00:02:16,350 Haces esto esperando algunos argumentos aquí en el constructor y para una categoría, quiero obtener un ID 28 00:02:16,350 --> 00:02:22,200 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 29 00:02:22,200 --> 00:02:23,880 esta categoría y almacenaré todos estos 30 00:02:24,060 --> 00:02:29,460 datos en propiedades con la ayuda de esta palabra clave. En caso de que esto sea 31 00:02:29,460 --> 00:02:35,670 totalmente nuevo para usted, primero sumérjase en algunos cursos o recursos de Javascript porque esto no 32 00:02:35,670 --> 00:02:38,550 tiene nada que ver con React navigation o 33 00:02:38,580 --> 00:02:42,470 con React Native, este es el Javascript moderno de vainilla. 34 00:02:42,480 --> 00:02:44,470 Ahora, ¿por qué creé esto? 35 00:02:44,490 --> 00:02:52,650 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 36 00:02:52,650 --> 00:02:56,460 luego úselo para crear algunos datos ficticios. 37 00:02:56,460 --> 00:03:04,650 Ahora encontrará los datos ficticios adjuntos, adjunto encontrará el archivo Javascript con estas categorías ficticias que almaceno en una constante 38 00:03:04,860 --> 00:03:09,070 que luego exporto como una exportación con nombre aquí. 39 00:03:09,240 --> 00:03:14,200 Estos son algunos datos de categoría ficticios para las categorías en esta aplicación, en estas 40 00:03:14,520 --> 00:03:19,290 categorías que quiero tener en esta aplicación. Estas son las categorías que usaré 41 00:03:19,290 --> 00:03:25,590 en esta aplicación y estas son las categorías que ahora podemos usar dentro de nuestras pantallas, para ser precisos. 42 00:03:26,540 --> 00:03:37,110 Entonces, allí, quiero agregar una importación e importar categorías de datos / datos ficticios, así que eso es importar esa 43 00:03:37,120 --> 00:03:40,640 constante nombrada que estamos exportando allí. 44 00:03:40,660 --> 00:03:44,020 Ahora bien, este es un conjunto de objetos Javascript al final, ¿verdad? 45 00:03:44,050 --> 00:03:45,610 Eso es lo que almacenamos 46 00:03:45,640 --> 00:03:51,850 allí, es solo una matriz de objetos Javascript que ahora podemos usar para representar nuestra lista o, para ser precisos, 47 00:03:51,850 --> 00:03:53,090 nuestra cuadrícula aquí. 48 00:03:53,170 --> 00:04:01,240 Por lo tanto, los datos para esta FlatList son simplemente mis matrices de categorías, por lo que solo apuntaré a las categorías 49 00:04:01,240 --> 00:04:08,510 y, por supuesto, ahora también necesitamos un elemento de representación para definir cómo se debe representar un solo elemento 50 00:04:08,510 --> 00:04:15,380 de cuadrícula, qué componente se debe representar allí. Para esto, agregaré una nueva función aquí, renderizar elemento 51 00:04:15,380 --> 00:04:22,580 de cuadrícula, que es una función que recibirá algunos datos de elemento al final aquí y que debería devolver 52 00:04:22,580 --> 00:04:25,460 un elemento jsx, debería devolver algún componente 53 00:04:25,460 --> 00:04:33,950 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 54 00:04:33,950 --> 00:04:40,160 con un texto allí y en ese texto, quiero renderizar itemData. 55 00:04:40,160 --> 00:04:42,400 elemento, eso es lo que tenemos 56 00:04:42,410 --> 00:04:48,250 disponible en una FlatList si recuerda módulos anteriores, el objeto de datos del elemento aquí tiene una 57 00:04:48,250 --> 00:04:55,520 propiedad de elemento, React Native FlatList le brinda esta propiedad y allí tendremos una propiedad de título porque un elemento que estamos llegar 58 00:04:55,520 --> 00:05:01,940 aquí es solo una categoría que obtenemos de nuestros datos que estamos ingresando en la FlatList, por lo que tendremos 59 00:05:01,970 --> 00:05:05,490 un objeto Javascript como elemento allí y este objeto Javascript se 60 00:05:05,630 --> 00:05:12,000 basa en nuestro modelo aquí y allá, configuramos un título, un color y una propiedad de ID, por lo tanto, 61 00:05:12,040 --> 00:05:12,820 tenemos una 62 00:05:12,980 --> 00:05:19,160 propiedad de título, por lo tanto, podemos extraer el título aquí de esta manera, usaremos el color más adelante. 63 00:05:20,250 --> 00:05:22,010 Así que eso 64 00:05:22,080 --> 00:05:26,850 es lo primero, esto debería funcionar. Ahora, en las nuevas versiones de 65 00:05:26,850 --> 00:05:35,340 React Native, tampoco es necesario que informe a React Native que su ID no se llama clave, sino que en realidad se llama ID 66 00:05:35,400 --> 00:05:42,270 porque las versiones más recientes de React Native también aceptan ID como ID en los datos de la lista. 67 00:05:42,270 --> 00:05:48,300 Si desea seguir en una versión anterior, necesitaría agregar un extractor de claves aquí, que es una función que obtiene el 68 00:05:48,630 --> 00:05:54,660 elemento y el índice y necesita devolver el valor que debería usarse como clave, por lo que en este caso eso 69 00:05:54,720 --> 00:05:56,980 sería ser artículo id, una vez 70 00:05:57,030 --> 00:06:03,030 más, las versiones más nuevas de React Native no necesitan esto, pero solo como referencia y para 71 00:06:03,030 --> 00:06:05,150 versiones anteriores, todavía agregaré esto aquí. 72 00:06:05,160 --> 00:06:08,610 Entonces ahora devolvemos nuestra FlatList aquí con nuestros datos. 73 00:06:08,610 --> 00:06:11,930 Si ahora guardamos esto, ya deberíamos ver nuestros datos 74 00:06:11,940 --> 00:06:15,320 aquí, por supuesto, no es realmente tan hermoso sino 75 00:06:15,330 --> 00:06:16,960 una cuadrícula, tenemos hamburguesas 76 00:06:17,040 --> 00:06:20,000 italianas, al lado rápidas y fáciles, al lado 77 00:06:20,130 --> 00:06:23,690 alemanas, simplemente no parece una cuadrícula pero técnicamente lo es. 78 00:06:24,030 --> 00:06:32,250 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 79 00:06:32,250 --> 00:06:33,080 de cuadrícula 80 00:06:33,090 --> 00:06:40,830 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 81 00:06:40,830 --> 00:06:42,620 lo que quieras nombrar y 82 00:06:43,430 --> 00:06:50,700 luego, allí abajo, agregaré elemento de cuadrícula a mi hoja de estilo y le doy esta propiedad de flex, queremos ocupar todo 83 00:06:50,700 --> 00:06:52,250 el espacio que pueda, 84 00:06:53,390 --> 00:06:57,530 guardar esto, ahora esto se parece un poco más a una cuadrícula. 85 00:06:57,530 --> 00:07:00,640 Ahora, un margen alrededor de cada elemento también sería 86 00:07:00,650 --> 00:07:08,450 bueno, por lo que para eso solo podemos agregar margen y tal vez agregar 15 como margen alrededor de cada elemento, para que tengamos 87 00:07:08,450 --> 00:07:10,070 más espacio en todas las 88 00:07:10,070 --> 00:07:12,500 direcciones y con eso, no es tan 89 00:07:12,500 --> 00:07:18,080 malo, por supuesto ahora también podemos cambiar el aspecto general y, por ejemplo, dar a cada elemento 90 00:07:18,080 --> 00:07:24,230 una altura de digamos 150 y depende totalmente de usted qué valores elija allí, pero diría que con eso, 91 00:07:24,230 --> 00:07:25,610 es una cuadrícula bastante 92 00:07:25,610 --> 00:07:26,400 agradable, 93 00:07:26,450 --> 00:07:31,310 ciertamente no gana un premio de estilo todavía, pero vamos en la dirección correcta. 94 00:07:32,920 --> 00:07:38,830 Ahora, antes de terminar el estilo de esto y definitivamente tenemos algo de trabajo por hacer para eso, asegurémonos 95 00:07:38,830 --> 00:07:44,950 de que podemos tocar estos elementos y luego vamos a la pantalla de detalles para ese elemento específico nuevamente, por 96 00:07:45,090 --> 00:07:50,770 lo tanto, veamos también cómo podemos en realidad establece un título en el encabezado para que tengamos una 97 00:07:50,770 --> 00:07:52,780 mejor idea de dónde estamos actualmente.