1 00:00:02,670 --> 00:00:08,610 Por lo tanto, queremos encontrar las comidas que se ajusten a la categoría que seleccionamos, por lo tanto, en realidad, en el 2 00:00:08,610 --> 00:00:09,660 componente de pantalla 3 00:00:09,660 --> 00:00:15,000 de comida de categoría, no estamos realmente interesados en la categoría seleccionada, pero estamos muy interesados en las comidas que 4 00:00:15,000 --> 00:00:17,150 pertenecen a esa categoría. Ahora, para 5 00:00:17,150 --> 00:00:22,910 eso, primero podemos importar nuestra matriz de comidas porque contiene todas las comidas posibles que tenemos 6 00:00:22,910 --> 00:00:28,550 y ahora queremos filtrar aquellas que realmente tienen la ID de categoría que seleccionamos allí, 7 00:00:28,550 --> 00:00:35,480 la matriz de ID de categoría que tiene cada comida. Verá en los datos ficticios que cada comida tiene esta variedad de ID de 8 00:00:35,480 --> 00:00:36,680 categoría a la que 9 00:00:36,680 --> 00:00:39,320 pertenece, así que eso es lo que usaremos para el filtrado. 10 00:00:39,320 --> 00:00:46,010 Entonces, en la pantalla de comidas de categoría, queremos encontrar las comidas que pertenecen a la categoría que seleccionamos y las almacenaré 11 00:00:46,070 --> 00:00:49,850 en una comida exhibida con nombre constante, el nombre, por supuesto, depende de 12 00:00:49,880 --> 00:00:54,230 usted y allí, miraré mi comidas, así que esa es toda la matriz de 13 00:00:54,230 --> 00:01:00,260 comidas y utiliza el método de filtro que Javascript ofrece para ejecutar una función en cada comida en esa matriz 14 00:01:00,260 --> 00:01:05,840 donde obtenemos la comida automáticamente como argumento y donde tenemos que devolver verdadero si es una de las 15 00:01:06,110 --> 00:01:10,740 comidas que queremos mantener o falso si es una de las comidas que no queremos 16 00:01:10,790 --> 00:01:17,510 conservar y queremos mantener todas las comidas donde la propiedad de ID de categoría de esa comida que estamos viendo contiene la ID 17 00:01:17,510 --> 00:01:19,340 de categoría que seleccionamos aquí. 18 00:01:20,090 --> 00:01:29,990 Entonces, aquí devolveré verdadero si el índice de ID de categoría de comida también es un método Javascript, la ID de gato que extrajimos de los parámetros 19 00:01:30,020 --> 00:01:36,470 de ruta, si eso es mayor o igual a cero porque será menos uno si la ID de 20 00:01:36,470 --> 00:01:43,490 categoría no es parte de las ID de categoría, si es cero o mayor, entonces sabemos que esta comida 21 00:01:43,490 --> 00:01:50,540 tiene esta ID de categoría en su matriz de ID de categoría y esto nos dará una variedad de comidas 22 00:01:50,540 --> 00:01:53,690 mostradas para esa categoría seleccionada, ahora eso es 23 00:01:53,690 --> 00:01:57,710 lo que queremos mostrar aquí. Ahora para esto, tengo mi 24 00:01:57,710 --> 00:02:04,280 punto de vista aquí y en ese punto de vista, nuevamente quiero renderizar una lista y ahora será una lista 25 00:02:04,280 --> 00:02:11,360 y no una cuadrícula, así que en lugar del botón que ya no necesitaremos, importaré FlatList aquí y luego renderizo mi 26 00:02:11,360 --> 00:02:13,590 FlatList de esta manera y ahora 27 00:02:13,850 --> 00:02:19,910 allí los datos que ingreso son, por supuesto, mi matriz de comidas que se muestran porque esas son 28 00:02:19,970 --> 00:02:22,490 las comidas que quiero mostrar en la pantalla. 29 00:02:22,700 --> 00:02:30,140 Ahora, como se mencionó anteriormente, las versiones modernas de React Native buscan automáticamente el campo de ID en una comida para usarlo como clave en 30 00:02:30,140 --> 00:02:37,970 FlatList, si está utilizando una versión anterior o también para practicar esto nuevamente, agregaré un extractor de claves aquí donde obtengo el artículo y el índice y 31 00:02:37,970 --> 00:02:44,150 sé que en cada comida, tendré un campo de ID porque eso es lo que configuramos aquí en el modelo y 32 00:02:44,150 --> 00:02:48,500 eso será lo que use como clave en mi lista, así que Lo usaré 33 00:02:48,500 --> 00:02:50,570 aquí en el extractor de claves. 34 00:02:50,570 --> 00:02:56,060 Sin embargo, más importante que el extractor de claves es el elemento de representación 35 00:02:56,090 --> 00:03:05,710 que, por supuesto, debe apuntar a una función que usamos para representar un elemento único en esa lista y allí, al igual que antes, configuraré 36 00:03:05,880 --> 00:03:15,460 una nueva función, lo haré aquí dentro de la función de mi componente para poder usar accesorios y nombraré este elemento de comida de 37 00:03:15,520 --> 00:03:21,310 renderizado, el nombre depende totalmente de usted. Allí, obtendré algunos datos del artículo, lo sé porque 38 00:03:21,310 --> 00:03:27,940 la lista plana nos pasa como objeto de datos del artículo en esta función y allí, tenemos que devolver un 39 00:03:27,940 --> 00:03:34,810 código jsx que debería representar un artículo de comida y allí mostraré un ver y por el momento, simplemente un componente 40 00:03:34,810 --> 00:03:43,390 de texto allí donde quiero generar itemData. articulo. título, así que solo el nombre de la 41 00:03:43,390 --> 00:03:49,420 comida por ahora, más tarde también mostraremos la imagen allí, pero por ahora, esto servirá y ahora renderizar elemento 42 00:03:49,660 --> 00:04:00,240 de comida es lo que uso aquí como la función de elemento de renderizado debería señalar. Esto debería generar una lista básica de comidas, 43 00:04:00,240 --> 00:04:07,560 veamos si eso funciona. Si guardamos esto y ahora seleccionamos digamos italiano, veo espagueti con salsa de tomate, no 44 00:04:07,560 --> 00:04:08,810 se ve tan mal. 45 00:04:08,880 --> 00:04:15,120 Rápido y fácil, vemos cuatro comidas y hamburguesas, vemos la hamburguesa clásica, ligera y encantadora, vemos dos 46 00:04:15,120 --> 00:04:21,640 recetas, por lo que parece funcionar, parece que las recetas se seleccionan en función de la categoría 47 00:04:21,660 --> 00:04:28,500 que elegimos y, por supuesto, eso es genial. Ahora es hora de trabajar un poco en el estilo porque no estoy 48 00:04:28,500 --> 00:04:31,170 seguro de ti, pero creo que podemos mejorarlo un poco.