1
00:00:02,350 --> 00:00:07,000
Na tela de categorias, queremos garantir que nosso item possa ser tocado

2
00:00:07,020 --> 00:00:13,590
lá, então importarei o toque e a opacidade do toque aqui para ter um leve efeito de opacidade,

3
00:00:13,740 --> 00:00:15,000
mas é claro

4
00:00:15,090 --> 00:00:17,100
que depende de você qual

5
00:00:17,100 --> 00:00:23,730
padrão ou qual componente você usa deve haver um componente palpável no qual você envolve o item aqui

6
00:00:23,730 --> 00:00:24,750
e agora

7
00:00:24,750 --> 00:00:30,060
com a opacidade palpável, adicionarei o onPress para que possamos fazer algo quando pressionado.

8
00:00:30,060 --> 00:00:31,400
O que nós queremos fazer?

9
00:00:31,440 --> 00:00:38,760
Queremos ir para a tela de refeições da categoria, que é o tipo de página de detalhes de uma categoria escolhida para mostrar

10
00:00:38,760 --> 00:00:40,830
todas as receitas dessa categoria, ainda

11
00:00:40,830 --> 00:00:43,910
não temos receitas, mas ainda quero ir para a página.

12
00:00:44,610 --> 00:00:50,100
Portanto, aqui, precisamos acionar uma ação de navegação e anteriormente fizemos isso com a navegação

13
00:00:50,280 --> 00:00:51,470
de acessórios, certo?

14
00:00:51,480 --> 00:00:56,550
O problema é que não temos adereços disponíveis aqui, porque estamos dentro da função de item da grade

15
00:00:56,670 --> 00:00:59,090
de renderização que está fora do nosso componente.

16
00:00:59,130 --> 00:01:04,610
Agora podemos simplesmente mover isso para dentro do nosso componente para corrigir esse problema.

17
00:01:04,770 --> 00:01:10,470
Se criarmos essa função lá, teremos acesso a adereços porque agora estamos dentro da nossa função

18
00:01:10,470 --> 00:01:17,070
de componente e agora poderemos chamar de navegar aqui. Podemos ligar para navegar e eu quero ir para o

19
00:01:17,070 --> 00:01:23,310
nome de uma rota e, é claro, o nome da rota para a qual quero ir pode ser encontrado em nosso navegador

20
00:01:23,310 --> 00:01:27,510
é a categoria refeições corretas, porque queremos carregar todas as refeições para a categoria escolhida.

21
00:01:27,510 --> 00:01:33,660
Então, vamos para a categoria refeições aqui e, se adicionarmos e salvarmos, veremos agora que nosso estilo está um

22
00:01:33,660 --> 00:01:37,560
pouco quebrado, vou corrigir isso em um segundo, mas a navegação funciona,

23
00:01:37,560 --> 00:01:44,520
também temos esse efeito de opacidade, então está funcionando . Agora, corrigir o estilo é fácil, nós o perdemos porque

24
00:01:44,520 --> 00:01:47,080
envolvi a opacidade palpável em torno da

25
00:01:47,220 --> 00:01:53,760
minha visualização, só precisamos adicionar esse estilo aqui, que adiciona a margem ao redor do item e assim por diante,

26
00:01:53,760 --> 00:02:00,230
à opacidade palpável, em vez da visualização aqui e com isso, recuperamos esse estilo e agora está funcionando como deveria.

27
00:02:00,270 --> 00:02:06,630
A questão mais interessante é: como podemos realmente definir o título do cabeçalho? Agora, para isso, temos algumas opções, vamos

28
00:02:06,630 --> 00:02:07,720
dar

29
00:02:07,800 --> 00:02:13,740
uma olhada na opção número um. Em cada componente React que você carregará como

30
00:02:13,740 --> 00:02:22,420
uma tela, o que significa o que você mapeia para esse nome de tela, por exemplo no navegador de pilha, você pode adicionar uma propriedade.

31
00:02:22,410 --> 00:02:28,590
Agora, lembre-se de que a tela de categorias é obviamente um componente React, mas tecnicamente, é uma função

32
00:02:28,590 --> 00:02:29,370
Javascript, certo?

33
00:02:29,370 --> 00:02:34,290
É uma função que recebe o argumento props e, em seguida, executa esse corpo que retorna alguns

34
00:02:34,290 --> 00:02:37,390
jsx e, portanto, o React pode usar isso como um

35
00:02:37,530 --> 00:02:39,840
componente, mas tecnicamente é uma função Javascript.

36
00:02:39,840 --> 00:02:43,490
Agora, as funções Javascript são apenas objetos, ou

37
00:02:43,500 --> 00:02:44,720
seja, Javascript,

38
00:02:44,790 --> 00:02:52,800
funções são objetos e nos objetos, podemos adicionar propriedades. Portanto, a tela de categorias é apenas um objeto

39
00:02:52,890 --> 00:02:53,630
Javascript,

40
00:02:53,730 --> 00:02:57,150
portanto, podemos adicionar uma propriedade depois de criá-la.

41
00:02:57,150 --> 00:03:07,040
Portanto, aqui, depois de definir a função da tela de categorias e, portanto, esse objeto, podemos acessá-lo e adicionar uma propriedade com

42
00:03:07,040 --> 00:03:13,250
a notação de ponto, é assim que o Javascript funciona, você pode simplesmente adicionar

43
00:03:13,250 --> 00:03:14,250
essa propriedade.

44
00:03:14,260 --> 00:03:20,870
Agora você pode adicionar aqui uma propriedade especial cuja aparência será a navegação do React e essa é a propriedade

45
00:03:21,350 --> 00:03:22,970
das opções de navegação.

46
00:03:22,970 --> 00:03:26,270
Você não precisa adicioná-lo e isso não será um problema se

47
00:03:26,270 --> 00:03:32,000
você não o fizer, não o fizemos até agora, mas você pode adicioná-lo; se você adicionar, será respeitado pelo React navegação.

48
00:03:33,210 --> 00:03:38,480
Agora, existem várias opções que você pode configurar e, obviamente, uma lista completa pode ser

49
00:03:38,480 --> 00:03:40,120
encontrada nos documentos oficiais.

50
00:03:40,270 --> 00:03:45,100
Da forma mais simples, você simplesmente atribui um objeto Javascript aqui com esse

51
00:03:45,100 --> 00:03:51,880
monte de opções que agora pode configurar neste objeto e a opção em que estou interessado aqui é o

52
00:03:52,030 --> 00:04:00,440
título do cabeçalho, que pode ser simplesmente definido como um texto, por exemplo categorias de refeição, porque estamos na tela de categorias, o que

53
00:04:00,430 --> 00:04:03,970
seria um título adequado. Se salvarmos isso, agora

54
00:04:03,970 --> 00:04:09,090
você verá as categorias de refeição como um título aqui no cabeçalho.

55
00:04:09,120 --> 00:04:14,970
Agora você também pode estilizar o cabeçalho aqui com a ajuda da propriedade style do cabeçalho; isso requer um

56
00:04:14,970 --> 00:04:21,200
objeto de estilo no qual você geralmente pode configurar o que pode ser configurado como estilos nas visualizações e, além

57
00:04:21,310 --> 00:04:27,090
disso, pode adicionar uma cor de fundo que seja o estilo mais comum que você normalmente aplica.

58
00:04:27,210 --> 00:04:32,610
Agora eu quero configurar uma cor aqui e vou usar uma abordagem que já usei

59
00:04:32,670 --> 00:04:43,350
anteriormente no curso, vou adicionar uma pasta de constantes e lá, vou adicionar cores. arquivo js no qual exportarei um objeto Javascript onde todas as

60
00:04:43,440 --> 00:04:48,470
cores que eu quero usar repetidamente no aplicativo estão configuradas.

61
00:04:48,600 --> 00:04:56,790
Lá, configurarei uma cor primária para a qual pré-selecionei um código hexadecimal # 4a148C, mas é claro que você pode experimentar cores diferentes,

62
00:04:56,790 --> 00:05:03,060
se quiser, e configurarei uma cor de destaque ou uma cor secundária cujo código hexadecimal seja #

63
00:05:03,270 --> 00:05:07,920
ff6f00 e essas são apenas as cores que eu escolhi, como eu

64
00:05:07,920 --> 00:05:13,850
mencionei, você pode usar diferentes, é claro. De volta à tela de categorias, agora

65
00:05:13,860 --> 00:05:21,030
quero usar cores e, para isso, você precisa importá-las, importar cores com C maiúsculo, que é

66
00:05:21,030 --> 00:05:29,730
apenas uma convenção que estou usando para indicar que isso é uma constante, de constantes / Cores , também chamado com

67
00:05:29,730 --> 00:05:38,420
C maiúsculo e, aqui, usamos Cores. primaryColor por exemplo. Se você fizer isso, verá que seu cabeçalho agora

68
00:05:38,420 --> 00:05:43,730
tem essa cor roxa escura que eu escolhi. Isso torna o título um pouco difícil de ler,

69
00:05:44,030 --> 00:05:48,670
mas felizmente, você pode estilizar isso também, não com o estilo do cabeçalho, porque essa é

70
00:05:48,720 --> 00:05:56,300
apenas a caixa do cabeçalho, por assim dizer, não seu conteúdo, mas o título pode ser estilizado com a cor da tonalidade do cabeçalho e novamente, a

71
00:05:56,450 --> 00:06:01,090
documentação oficial é o lugar onde você pode aprender tudo sobre essas opções disponíveis, é assim

72
00:06:01,100 --> 00:06:02,380
que eu sei sobre

73
00:06:02,390 --> 00:06:04,470
elas, é onde você lê sobre elas.

74
00:06:04,550 --> 00:06:10,820
Agora, a cor da tonalidade do cabeçalho sempre pode ser uma cor, por exemplo, branco aqui, que se ajusta

75
00:06:10,820 --> 00:06:19,120
à minha cor padrão e agora você vê que é branco. É claro que você também pode querer uma aparência diferente para Android e

76
00:06:19,120 --> 00:06:23,690
iOS; pode parecer onde isso parece mais iOS-ish, o que significa que você não tem

77
00:06:23,740 --> 00:06:29,560
um plano de fundo colorido, mas apenas um texto é colorido e você pode conseguir isso com o bom

78
00:06:29,560 --> 00:06:35,980
API da plataforma antiga que você aprendeu anteriormente no curso. Podemos usar a API da plataforma para

79
00:06:35,980 --> 00:06:42,490
alternar dinamicamente quais cores usamos aqui com base na plataforma em que nosso aplicativo está sendo executado.

80
00:06:42,490 --> 00:06:47,630
Então aqui para a cor de fundo, podemos usar a plataforma. SO e veja se esse é

81
00:06:47,640 --> 00:06:53,850
o Android; nesse caso, quero usar a cor principal; caso contrário, nesta expressão ternária, não usarei cores,

82
00:06:53,920 --> 00:07:00,940
para que possamos usar o branco aqui, por exemplo, um fundo branco normal ou simplesmente configurar nenhuma cor assim,

83
00:07:00,940 --> 00:07:07,150
e você obterá a cor de fundo padrão. E para a cor da tonalidade, é a

84
00:07:07,150 --> 00:07:10,810
mesma coisa, verifico se o sistema operacional é Android no

85
00:07:10,810 --> 00:07:20,360
qual a cor do texto deve ser branca, caso contrário, configurarei isso para Cores. primaryColour e, com isso, agora você tem mais iOS, mais iOS

86
00:07:20,360 --> 00:07:27,530
parece aqui no iOS e tem a aparência padrão do Android, que é mais colorida no Android.

87
00:07:27,530 --> 00:07:31,100
É assim que você pode configurar as opções

88
00:07:31,130 --> 00:07:39,170
de navegação aqui. Agora, o que dizer dessa tela, onde vamos aos nossos detalhes aqui, às refeições italianas

89
00:07:39,170 --> 00:07:45,500
ou às refeições rápidas e fáceis? Seria bom se pudéssemos ver rápido e fácil aqui ou italiano aqui no

90
00:07:45,500 --> 00:07:46,400
cabeçalho nesse caso.

91
00:07:46,400 --> 00:07:51,230
Portanto, é a próxima coisa que devemos cuidar e, para isso, precisamos passar algumas

92
00:07:51,230 --> 00:07:55,940
informações dessa tela para essa tela. Então, veremos como isso funciona no próximo vídeo.