Agora você sabe como podemos ir para a página de detalhes, é claro, foi algo
que fizemos antes quando passamos da página de categorias para a página de refeições da categoria. Portanto, podemos usar a mesma abordagem aqui e, é
claro, ficar à
vontade para pausar o vídeo neste momento e fazer isso por conta
própria, isso é absolutamente algo que você pode fazer aqui como prática. Vamos, claro, também fazer isso juntos.
Portanto, na tela de categoria refeições, quando selecionamos uma refeição, onSelectMeal, essa função aqui deve ser acionada
porque estamos passando essa função por onSelectMeal para o item de refeição e lá, estamos vinculando-o
à imprensa, à opacidade palpável
aqui, para que seja acionado na refeição selecionada e, portanto, na tela de categoria
refeições, nesta função aqui, podemos navegar. Agora que eu defini essa função de refeição de renderização
onde renderizo meu item de refeição dentro do meu componente, tenho acesso a adereços e lá, como a tela de refeição de
categoria é nosso componente que carregamos com a ajuda da navegação, eu posso acessar a propriedade de navegação e o método de navegação e
você aprendeu que lá, agora podemos passar o nome da rota para onde queremos ir e que seria o detalhe da
refeição. Portanto, o nome da rota que configuramos no navegador de refeições, esse nome aqui, carregará o página de detalhes da refeição.
Agora, precisamos encaminhar alguns dados para lá e os dados que desejo encaminhar aqui, é claro, são o
ID da refeição selecionada, para que possamos carregar os detalhes dessa refeição na página de detalhes da
refeição para renderizá-los lá.
Portanto, na tela de categoria refeições aqui, podemos configurar parâmetros aqui no nosso objeto de navegação, no objeto que passamos para navegar e os parâmetros
levam um objeto de pares de valores-chave conforme você aprendeu, isso é algo que
fizemos antes e aqui, quero encaminhar minha refeição. ID que eu obviamente posso obter de
um dado de item porque itemData. item é uma refeição e todas as refeições, como você pode ver no modelo, têm um ID, estamos armazenando isso aqui.
Portanto, aqui, é claro, podemos dizer itemData. item. id, é isso que eu quero encaminhar
e, com isso, devemos ir para a página de detalhes da refeição e também poderemos extrair o ID da refeição
que carregamos.
Então, no MealDetailScreen, vamos ver se isso funciona, a refeição. id é adereços. navegação. getParam e
agora o nome era refeição. id, esse é o nome do parâmetro que eu escolhi aqui
para armazenar o parâmetro, se você escolher um nome diferente aqui, precisará escolher
um nome diferente aqui ou usar o mesmo nome lá, é claro, e agora podemos selecionar a refeição, para que vamos importar todas
as refeições do arquivo de dados fictícios na pasta de dados, assim e agora a refeição selecionada aqui, é claro, é a localização das refeições e, em seguida, executamos essa função em todas as refeições lá e é
a refeição onde a refeição. id corresponde à refeição. Se nós extraímos lá em
cima, essa é a nossa refeição selecionada. Para provar que isso funciona, podemos produzir lá, selectedMeal. title e, claro, também quero
colocar o título no cabeçalho e isso também foi algo que você aprendeu.
Você pode fazer isso adicionando opções de navegação a essa tela aqui, opções de navegação
e aprendeu que, se quiser recuperar algo dinâmico, faça isso com a ajuda dessa função especial aqui.
Os dados de navegação são o que você chega lá, essa função é chamada por você React Navigation como você
aprendeu e agora lá, temos que retornar nosso objeto de navegação, nosso objeto de opções de navegação, mas antes de retornarmos, podemos usar os dados
de que obtemos dados de navegação, como nosso suporte de navegação, que por sua vez nos permite acessar
um parâmetro, para que possamos usar navigationData. navegação. getParam para obter a nossa refeição. id aqui também e também recuperamos nossa refeição,
assim como estamos fazendo lá em cima no componente, faça o mesmo lá
em baixo para as opções de navegação e com a refeição selecionada, é claro que podemos definir
aqui um título de cabeçalho para selectedMeal. title e foi o que fizemos antes, é assim
que podemos extrair dados aqui em nossas opções de navegação e usar esses dados dinâmicos lá, por exemplo, para
definir o título do cabeçalho.
Com isso fora do
caminho, vamos ver se funciona, talvez no Android. Vamos para a luz e o amor, lá temos todas as nossas receitas, vamos para
a salada aqui e aqui está, aqui está o nosso título, também o vemos aqui, então
tudo está carregado, se formos ao salmão, veremos este.
Então tudo está funcionando como deveria, muito bom
ver, agora é
hora de dar o próximo passo, porque, por exemplo, queremos poder marcar uma refeição como favorita e,
por isso, quero ter um ícone de estrela aqui na navegação que eu posso pressionar.
Isso é algo que ainda estamos perdendo e que ainda não aprendemos, por
isso é um bom próximo passo.