Por lo tanto, queremos encontrar las comidas que se ajusten a la categoría que seleccionamos, por lo tanto, en realidad, en el
componente de pantalla
de comida de categoría, no estamos realmente interesados en la categoría seleccionada, pero estamos muy interesados en las comidas que
pertenecen a esa categoría. Ahora, para
eso, primero podemos importar nuestra matriz de comidas porque contiene todas las comidas posibles que tenemos
y ahora queremos filtrar aquellas que realmente tienen la ID de categoría que seleccionamos allí,
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
categoría a la que
pertenece, así que eso es lo que usaremos para el filtrado.
Entonces, en la pantalla de comidas de categoría, queremos encontrar las comidas que pertenecen a la categoría que seleccionamos y las almacenaré
en una comida exhibida con nombre constante, el nombre, por supuesto, depende de
usted y allí, miraré mi comidas, así que esa es toda la matriz de
comidas y utiliza el método de filtro que Javascript ofrece para ejecutar una función en cada comida en esa matriz
donde obtenemos la comida automáticamente como argumento y donde tenemos que devolver verdadero si es una de las
comidas que queremos mantener o falso si es una de las comidas que no queremos
conservar y queremos mantener todas las comidas donde la propiedad de ID de categoría de esa comida que estamos viendo contiene la ID
de categoría que seleccionamos aquí.
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
de ruta, si eso es mayor o igual a cero porque será menos uno si la ID de
categoría no es parte de las ID de categoría, si es cero o mayor, entonces sabemos que esta comida
tiene esta ID de categoría en su matriz de ID de categoría y esto nos dará una variedad de comidas
mostradas para esa categoría seleccionada, ahora eso es
lo que queremos mostrar aquí. Ahora para esto, tengo mi
punto de vista aquí y en ese punto de vista, nuevamente quiero renderizar una lista y ahora será una lista
y no una cuadrícula, así que en lugar del botón que ya no necesitaremos, importaré FlatList aquí y luego renderizo mi
FlatList de esta manera y ahora
allí los datos que ingreso son, por supuesto, mi matriz de comidas que se muestran porque esas son
las comidas que quiero mostrar en la pantalla.
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
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
sé que en cada comida, tendré un campo de ID porque eso es lo que configuramos aquí en el modelo y
eso será lo que use como clave en mi lista, así que Lo usaré
aquí en el extractor de claves.
Sin embargo, más importante que el extractor de claves es el elemento de representación
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é
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
renderizado, el nombre depende totalmente de usted. Allí, obtendré algunos datos del artículo, lo sé porque
la lista plana nos pasa como objeto de datos del artículo en esta función y allí, tenemos que devolver un
código jsx que debería representar un artículo de comida y allí mostraré un ver y por el momento, simplemente un componente
de texto allí donde quiero generar itemData. articulo. título, así que solo el nombre de la
comida por ahora, más tarde también mostraremos la imagen allí, pero por ahora, esto servirá y ahora renderizar elemento
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,
veamos si eso funciona. Si guardamos esto y ahora seleccionamos digamos italiano, veo espagueti con salsa de tomate, no
se ve tan mal.
Rápido y fácil, vemos cuatro comidas y hamburguesas, vemos la hamburguesa clásica, ligera y encantadora, vemos dos
recetas, por lo que parece funcionar, parece que las recetas se seleccionan en función de la categoría
que elegimos y, por supuesto, eso es genial. Ahora es hora de trabajar un poco en el estilo porque no estoy
seguro de ti, pero creo que podemos mejorarlo un poco.