1
00:00:02,250 --> 00:00:07,650
Estamos extraindo nossa categoria aqui em nosso componente porque estamos obtendo nosso parâmetro lá com a ajuda

2
00:00:07,650 --> 00:00:09,130
de adereços de navegação.

3
00:00:09,150 --> 00:00:12,980
Agora, na verdade, quero exibir o título no meu cabeçalho.

4
00:00:13,050 --> 00:00:18,520
Agora você aprendeu como configurar esse cabeçalho com a ajuda das opções de navegação, portanto, no componente de

5
00:00:18,630 --> 00:00:25,170
tela de refeição de categoria e, portanto, esta é uma função, portanto, este é um objeto, podemos adicionar opções de navegação

6
00:00:25,530 --> 00:00:30,300
e você aprendeu que este é um O objeto Javascript no qual você pode

7
00:00:30,300 --> 00:00:35,670
configurar um título de cabeçalho e um título de cabeçalho agora deve ser meu nome de categoria.

8
00:00:35,700 --> 00:00:43,910
O problema aqui é que, aqui, a categoria selecionada está disponível, mas faz parte da função do componente.

9
00:00:43,910 --> 00:00:49,670
Isso, é claro, por outro lado, não é algo que possamos acessar aqui, porque isso acontece após a

10
00:00:49,670 --> 00:00:50,990
definição da função.

11
00:00:51,350 --> 00:00:55,150
Portanto, não temos acesso à categoria que identificamos lá,

12
00:00:55,220 --> 00:00:56,920
isso é um problema.

13
00:00:56,930 --> 00:01:04,390
O bom é que as opções de navegação podem ser um objeto se você tiver valores de configuração codificados estáticos, mas também

14
00:01:05,000 --> 00:01:11,990
pode ser uma função se você precisar de uma configuração dinâmica que depende da alteração de dados e, é claro,

15
00:01:12,020 --> 00:01:17,300
os dados de que dependemos aqui estão mudando porque ' estamos usando uma mesma

16
00:01:17,300 --> 00:01:22,820
tela para diferentes categorias e, portanto, o ID e o título da categoria mudam toda vez

17
00:01:22,820 --> 00:01:26,140
que usamos essa tela. Uma vez, usamos para

18
00:01:26,140 --> 00:01:32,360
a categoria italiana, da próxima vez, para a categoria exótica. Essa função que você também pode usar, é

19
00:01:32,360 --> 00:01:34,700
obviamente suportada pela navegação React e,

20
00:01:34,700 --> 00:01:40,220
se for uma função, o que você está passando para as opções de navegação,

21
00:01:40,220 --> 00:01:48,740
a navegação React chamará isso para você e passará alguns dados de navegação, portanto passar um objeto com alguns dados que devem

22
00:01:48,740 --> 00:01:54,800
ajudá-lo, veremos o que está lá em um segundo, porque podemos simplesmente registrar esses dados de

23
00:01:54,800 --> 00:01:55,850
navegação aqui.

24
00:01:55,970 --> 00:01:57,610
Vamos começar com isso, agora

25
00:01:57,710 --> 00:02:01,210
vamos a esta página e vamos ver o que está lá.

26
00:02:01,310 --> 00:02:05,850
Se eu expandir isso aqui, esse é o log que obtive e você

27
00:02:05,850 --> 00:02:14,570
verá que temos outro suporte de navegação nos dados de navegação. Lá temos ações, navegamos pop, push,

28
00:02:14,580 --> 00:02:15,390
basicamente

29
00:02:15,390 --> 00:02:20,010
o que sabíamos. Também temos o getParam

30
00:02:20,010 --> 00:02:28,050
lá e isso deve ser útil, pois isso nos permitirá extrair dados aqui dentro de nossas opções

31
00:02:28,110 --> 00:02:36,880
de navegação no final, o que deve ser super útil. Portanto, no final, obtemos o mesmo suporte de navegação que também recebemos nos nossos componentes.

32
00:02:37,040 --> 00:02:48,110
Então, aqui, agora podemos usar navigationData. navegação. getParam para obter meu ID de categoria,

33
00:02:48,110 --> 00:02:54,660
exatamente o que fizemos no componente. Assim, podemos repetir o código que tínhamos em um

34
00:02:54,660 --> 00:03:02,020
componente e obter a categoria selecionada, não apenas no componente, mas agora também nesta função que usamos para configurar nossas opções de navegação.

35
00:03:02,040 --> 00:03:08,130
Então agora aqui, também temos acesso à categoria selecionada e agora, opções de navegação, essa função, se

36
00:03:08,220 --> 00:03:13,460
for uma função, deve, é claro, retornar um objeto com suas opções de navegação.

37
00:03:13,470 --> 00:03:19,860
Portanto, o que anteriormente definimos diretamente como opções de navegação quando agora só havia valores codificados,

38
00:03:19,860 --> 00:03:20,550
deve

39
00:03:20,610 --> 00:03:26,950
ser retornado, mas agora podemos usar esses dados derivados dinamicamente ou as informações derivadas dinamicamente aqui.

40
00:03:26,970 --> 00:03:33,600
Portanto, agora ainda podemos configurar um título de cabeçalho aqui e o título do cabeçalho agora pode

41
00:03:33,720 --> 00:03:35,450
ser selecionadoCategory. título.

42
00:03:35,510 --> 00:03:41,300
É assim que podemos derivar dinamicamente isso e, portanto, agora, se você voltar,

43
00:03:41,300 --> 00:03:47,420
verá italiano aqui, verá rápido e fácil aqui, verá alemão aqui e isso simplesmente funciona.

44
00:03:47,420 --> 00:03:55,280
Observe que, por padrão, você também recebe um texto do botão Voltar, que é o título da tela anterior, esse é outro

45
00:03:55,280 --> 00:04:01,130
recurso padrão que o React Navigation fornece. Aqui vemos as categorias de refeição porque somos

46
00:04:01,130 --> 00:04:05,720
provenientes de categorias de refeição. Somente em uma maneira rápida e fácil,

47
00:04:05,720 --> 00:04:13,010
onde isso seria muito longo ao lado deste título um pouco mais longo, ele reverte e volta ao padrão, que é um bom comportamento

48
00:04:13,010 --> 00:04:19,400
padrão que você pode substituir, mas que eu estou feliz aqui. No Android, não temos um texto de volta, mas é

49
00:04:19,400 --> 00:04:25,340
claro que temos um botão de voltar e, lá, o cabeçalho também é preenchido corretamente para as telas carregadas.

50
00:04:26,240 --> 00:04:32,030
É assim que também podemos obter nossos dados dinamicamente aqui nas opções de navegação. Um problema que você pode notar, porém, o que é

51
00:04:32,030 --> 00:04:37,430
mais visível aqui no Android, é que o cabeçalho na nova tela que estamos carregando não tem o mesmo estilo

52
00:04:37,700 --> 00:04:44,450
que o nosso cabeçalho aqui, não tem a cor de fundo, ou seja. Agora, é claro, isso é facilmente corrigido, porque nas

53
00:04:44,480 --> 00:04:51,620
opções de navegação da categoria refeições, podemos simplesmente trazer o estilo do cabeçalho e a cor do cabeçalho

54
00:04:51,620 --> 00:04:58,250
que configuramos aqui na outra tela também. Então, podemos copiar isso aqui e

55
00:04:58,250 --> 00:05:06,200
isso significa que precisamos importar a API da plataforma e, é claro, nossa cor constante. Portanto, importe cores

56
00:05:06,550 --> 00:05:18,730
de constantes / cores como essa e, quando fizermos isso, veremos que, se formos para lá , agora temos o mesmo estilo de cabeçalho para esta nova

57
00:05:18,730 --> 00:05:25,570
página, que é o que você normalmente deseja. O que você normalmente não quer é que

58
00:05:25,600 --> 00:05:31,300
você precise copiar a mesma configuração para todas as telas, porque neste aplicativo, não temos

59
00:05:31,300 --> 00:05:36,070
muitas telas, certamente podemos fazer isso, mas em aplicativos maiores, onde você tem

60
00:05:36,070 --> 00:05:42,520
mais telas, que seria super chato e super pesado, então definitivamente não é o caminho a percorrer.

61
00:05:42,520 --> 00:05:44,740
Então, vamos dar uma olhada em uma alternativa na próxima palestra.