1
00:00:02,710 --> 00:00:05,590
Agora você sabe como podemos ir para a página de detalhes, é claro, foi algo

2
00:00:05,620 --> 00:00:11,530
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, é

3
00:00:11,530 --> 00:00:12,880
claro, ficar à

4
00:00:12,910 --> 00:00:16,900
vontade para pausar o vídeo neste momento e fazer isso por conta

5
00:00:16,900 --> 00:00:24,540
própria, isso é absolutamente algo que você pode fazer aqui como prática. Vamos, claro, também fazer isso juntos.

6
00:00:24,630 --> 00:00:32,550
Portanto, na tela de categoria refeições, quando selecionamos uma refeição, onSelectMeal, essa função aqui deve ser acionada

7
00:00:32,550 --> 00:00:39,950
porque estamos passando essa função por onSelectMeal para o item de refeição e lá, estamos vinculando-o

8
00:00:39,950 --> 00:00:42,550
à imprensa, à opacidade palpável

9
00:00:42,570 --> 00:00:48,870
aqui, para que seja acionado na refeição selecionada e, portanto, na tela de categoria

10
00:00:48,870 --> 00:00:54,870
refeições, nesta função aqui, podemos navegar. Agora que eu defini essa função de refeição de renderização

11
00:00:54,900 --> 00:01:00,780
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

12
00:01:00,780 --> 00:01:07,050
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

13
00:01:07,050 --> 00:01:12,820
você aprendeu que lá, agora podemos passar o nome da rota para onde queremos ir e que seria o detalhe da

14
00:01:12,900 --> 00:01:18,810
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.

15
00:01:19,590 --> 00:01:26,400
Agora, precisamos encaminhar alguns dados para lá e os dados que desejo encaminhar aqui, é claro, são o

16
00:01:26,400 --> 00:01:32,850
ID da refeição selecionada, para que possamos carregar os detalhes dessa refeição na página de detalhes da

17
00:01:32,850 --> 00:01:34,500
refeição para renderizá-los lá.

18
00:01:34,770 --> 00:01:44,520
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

19
00:01:44,520 --> 00:01:49,980
levam um objeto de pares de valores-chave conforme você aprendeu, isso é algo que

20
00:01:49,980 --> 00:01:56,730
fizemos antes e aqui, quero encaminhar minha refeição. ID que eu obviamente posso obter de

21
00:01:56,790 --> 00:02:03,330
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.

22
00:02:04,320 --> 00:02:10,890
Portanto, aqui, é claro, podemos dizer itemData. item. id, é isso que eu quero encaminhar

23
00:02:10,890 --> 00:02:16,650
e, com isso, devemos ir para a página de detalhes da refeição e também poderemos extrair o ID da refeição

24
00:02:16,650 --> 00:02:17,410
que carregamos.

25
00:02:17,640 --> 00:02:26,760
Então, no MealDetailScreen, vamos ver se isso funciona, a refeição. id é adereços. navegação. getParam e

26
00:02:26,760 --> 00:02:34,470
agora o nome era refeição. id, esse é o nome do parâmetro que eu escolhi aqui

27
00:02:34,470 --> 00:02:39,090
para armazenar o parâmetro, se você escolher um nome diferente aqui, precisará escolher

28
00:02:39,090 --> 00:02:46,980
um nome diferente aqui ou usar o mesmo nome lá, é claro, e agora podemos selecionar a refeição, para que vamos importar todas

29
00:02:46,980 --> 00:02:59,800
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 é

30
00:02:59,800 --> 00:03:05,770
a refeição onde a refeição. id corresponde à refeição. Se nós extraímos lá em

31
00:03:05,860 --> 00:03:14,200
cima, essa é a nossa refeição selecionada. Para provar que isso funciona, podemos produzir lá, selectedMeal. title e, claro, também quero

32
00:03:14,290 --> 00:03:21,250
colocar o título no cabeçalho e isso também foi algo que você aprendeu.

33
00:03:21,970 --> 00:03:28,460
Você pode fazer isso adicionando opções de navegação a essa tela aqui, opções de navegação

34
00:03:28,490 --> 00:03:35,090
e aprendeu que, se quiser recuperar algo dinâmico, faça isso com a ajuda dessa função especial aqui.

35
00:03:35,690 --> 00:03:42,650
Os dados de navegação são o que você chega lá, essa função é chamada por você React Navigation como você

36
00:03:43,340 --> 00:03:52,050
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

37
00:03:52,050 --> 00:03:58,470
de que obtemos dados de navegação, como nosso suporte de navegação, que por sua vez nos permite acessar

38
00:03:58,470 --> 00:04:09,340
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,

39
00:04:09,340 --> 00:04:13,890
assim como estamos fazendo lá em cima no componente, faça o mesmo lá

40
00:04:13,990 --> 00:04:19,630
em baixo para as opções de navegação e com a refeição selecionada, é claro que podemos definir

41
00:04:19,630 --> 00:04:25,040
aqui um título de cabeçalho para selectedMeal. title e foi o que fizemos antes, é assim

42
00:04:25,060 --> 00:04:30,650
que podemos extrair dados aqui em nossas opções de navegação e usar esses dados dinâmicos lá, por exemplo, para

43
00:04:30,790 --> 00:04:32,620
definir o título do cabeçalho.

44
00:04:35,400 --> 00:04:37,830
Com isso fora do

45
00:04:37,920 --> 00:04:47,600
caminho, vamos ver se funciona, talvez no Android. Vamos para a luz e o amor, lá temos todas as nossas receitas, vamos para

46
00:04:49,530 --> 00:04:54,690
a salada aqui e aqui está, aqui está o nosso título, também o vemos aqui, então

47
00:04:54,690 --> 00:04:58,050
tudo está carregado, se formos ao salmão, veremos este.

48
00:04:58,050 --> 00:05:00,850
Então tudo está funcionando como deveria, muito bom

49
00:05:00,870 --> 00:05:02,350
ver, agora é

50
00:05:02,370 --> 00:05:08,340
hora de dar o próximo passo, porque, por exemplo, queremos poder marcar uma refeição como favorita e,

51
00:05:08,340 --> 00:05:13,650
por isso, quero ter um ícone de estrela aqui na navegação que eu posso pressionar.

52
00:05:13,650 --> 00:05:16,290
Isso é algo que ainda estamos perdendo e que ainda não aprendemos, por

53
00:05:16,320 --> 00:05:17,850
isso é um bom próximo passo.