Portanto, queremos encontrar as refeições que se encaixam na categoria que selecionamos; portanto, no componente de tela de
refeição da
categoria, não estamos realmente interessados na categoria selecionada, mas estamos muito interessados nas refeições que pertencem
a essa categoria. Agora, para
isso, podemos primeiro importar nossa matriz de refeições, porque ela contém todas as refeições possíveis que
temos e agora queremos filtrar as que realmente têm o ID da categoria que selecionamos lá,
o array de ID da categoria que cada refeição possui. Você verá nos dados fictícios que todas as refeições têm esse conjunto de
IDs de categoria aos
quais pertencem, e é isso que usaremos para filtrar.
Portanto, na tela de categoria de refeições, queremos encontrar as refeições que pertencem a essa categoria que selecionamos e eu as armazenarei
em uma constante refeições nomeadas exibidas, o nome é claro que
depende de você e, aqui, examinarei minhas refeições, de modo que é toda a
matriz de refeições e use o método de filtro que o Javascript oferece para executar uma função em todas as
refeições nessa matriz, onde obtemos a refeição automaticamente como argumento e onde precisamos retornar true se for uma
das refeições que queremos manter ou falso se for uma das refeições que não queremos
e queremos manter todas as refeições em que a propriedade dos IDs da categoria da refeição que estamos vendo contenha o ID
da categoria que selecionamos aqui.
Portanto, retornarei true se o índice de IDs da categoria de refeição também for um método Javascript, o ID do gato que extraímos dos parâmetros de
rota, se for maior ou igual a zero, porque será menos um se o ID da categoria
não for parte dos IDs de categoria, se for zero ou maior, sabemos que esta refeição tem esse
ID de categoria em sua matriz de IDs de categoria e isso nos fornecerá uma variedade de refeições
exibidas para essa categoria selecionada, agora é isso
que queremos exibir aqui. Agora, eu tenho minha
visão aqui e, nessa visão, quero novamente renderizar uma lista e agora ela será uma lista e não
uma grade. Portanto, em vez do botão que não será mais necessário, importarei FlatList aqui e, em seguida, renderize
meu FlatList dessa forma e agora
os dados que eu alimentei, é claro, são minha matriz de refeições exibida, porque são as
refeições que eu quero renderizar na tela.
Agora, como mencionado anteriormente, as versões modernas do React Native procuram automaticamente o campo ID em uma refeição para usá-lo como uma chave no FlatList,
se você estiver usando uma versão mais antiga ou apenas para praticar isso novamente, adicionarei um extrator de chave aqui onde eu pego o item e o
índice e sei que em cada refeição, terei um campo de ID porque é isso que configuramos aqui no modelo e
será o que eu uso como chave na minha lista, então eu vou usar
isso aqui no extrator de chaves.
Mais importante que o extrator de chaves, no entanto, é o item de renderização,
que obviamente deve apontar para uma função que usamos para renderizar um único item nessa lista e lá, como antes, configurarei uma nova função, eu
o farei aqui dentro da minha função de componente para que eu possa usar adereços e nomeie esse item de refeição de renderização, o
nome é totalmente de sua responsabilidade. Lá, eu receberei alguns dados do item, eu sei
disso porque a lista simples nos passa como objeto de dados do item para esta função e lá temos que retornar
um código jsx que deve renderizar um item de refeição e lá eu renderizarei um visualizar e, por enquanto, simplesmente um componente
de texto onde eu quero gerar o itemData. item. title, portanto, apenas o nome da refeição no
momento, mais tarde também exibiremos a imagem lá, mas, por enquanto, isso fará e agora renderizará o item
da refeição é o que eu uso aqui, pois a função renderizar item deve apontar para. Isso deve render uma lista básica de refeições,
vamos ver se isso funciona. Se salvarmos isso e agora selecionarmos, digamos italiano, vejo espaguete com molho de tomate,
não parece tão ruim.
Rápido e fácil, vemos quatro refeições e hambúrgueres, vemos o hambúrguer clássico, leve e adorável,
vemos duas receitas, de modo que parece funcionar, parece que as receitas são selecionadas com base
na categoria que escolhemos e isso é ótimo. Agora é novamente a hora de trabalhar um pouco no estilo, porque não tenho
certeza de você, mas acho que podemos melhorar um pouco.