1
00:00:02,250 --> 00:00:07,290
Agora que entendemos o básico da navegação, que somos capazes de transmitir dados, vamos

2
00:00:07,350 --> 00:00:14,200
dar um passo atrás e focar no aplicativo que estamos construindo, o que obviamente não parece tão bom e

3
00:00:14,190 --> 00:00:18,450
vamos nos concentrar nesses itens de categoria aqui na grade.

4
00:00:18,450 --> 00:00:21,210
Podemos tocar neles, mas obviamente este não

5
00:00:21,210 --> 00:00:27,200
é um aplicativo que você gostaria de usar. Agora, para tornar isso mais utilizável na

6
00:00:27,240 --> 00:00:30,400
tela de categorias aqui, vou pegar esse item aqui,

7
00:00:30,490 --> 00:00:36,030
essa opacidade palpável, para que esse item da grade e o terceirize em um componente separado,

8
00:00:36,030 --> 00:00:43,210
não algo que você deve fazer, mas que talvez queira fazer simplesmente para manter seus componentes mais magros e limpos.

9
00:00:43,260 --> 00:00:49,890
Para isso na pasta de componentes, adicionarei um CategoryGridTile. arquivo js, é claro que o

10
00:00:49,890 --> 00:00:56,400
nome é totalmente seu e, aí, precisamos importar o React do React, certamente também precisaremos de

11
00:00:56,400 --> 00:01:03,990
algumas coisas do React Native para criar um componente, a saber, precisaremos de uma opacidade palpável claro, precisaremos

12
00:01:04,020 --> 00:01:11,550
da visualização, precisaremos de texto e precisaremos de uma folha de estilo para que também possamos estilizar isso

13
00:01:11,550 --> 00:01:14,900
aqui e agora possamos criar o componente de

14
00:01:14,940 --> 00:01:22,980
bloco de grade de categoria aqui que recebe alguns adereços. Vamos precisar de uma folha de estilo

15
00:01:22,980 --> 00:01:31,110
aqui, que armazenarei nos estilos constantes e, é claro, como sempre, podemos depois exportar o

16
00:01:31,110 --> 00:01:39,810
componente e dentro dessa função do componente, retornarei o código jsx que acabei de cortar na

17
00:01:39,810 --> 00:01:46,810
tela de categorias aqui . Portanto, aqui, a opacidade palpável configurada, esse item da grade está configurado,

18
00:01:46,810 --> 00:01:52,560
mas teremos que mudar algumas coisas. Na tela de categorias, por exemplo, estou configurando o estilo do item de grade aqui. Agora, podemos deixá-lo aqui e

19
00:01:52,560 --> 00:01:58,530
meio que passá-lo para o nosso bloco de grade e, em seguida, juntá-lo lá como você aprendeu,

20
00:01:58,530 --> 00:02:03,510
mas simplesmente configurarei todo o estilo no componente em si, porque usaremos apenas o

21
00:02:03,540 --> 00:02:09,810
bloco de categoria no grade na tela de categorias. Então, adicionarei o estilo do item de grade aqui à

22
00:02:09,870 --> 00:02:10,830
folha de

23
00:02:10,860 --> 00:02:17,280
estilo neste arquivo. Portanto, isso funcionará novamente. O manipulador onPress ainda não funcionará. Vamos corrigir isso em breve e agora

24
00:02:17,280 --> 00:02:24,720
podemos voltar à tela de categorias e, é claro, importe nosso componente. Portanto, importe o componente do bloco de grade

25
00:02:24,750 --> 00:02:28,250
da categoria para lá da pasta de

26
00:02:28,290 --> 00:02:37,080
componentes e para lá, bloco da grade de categoria e agora simplesmente retorne isso aqui quando renderizarmos um novo item.

27
00:02:37,080 --> 00:02:38,990
Agora, é claro que

28
00:02:39,000 --> 00:02:45,300
assim não funcionará, precisamos encaminhar alguns dados para o bloco de grade para que funcionem corretamente

29
00:02:45,300 --> 00:02:53,880
lá e também precisamos garantir que pressionar isso nos navegue. Agora, vou passar os dados que precisamos para lá, que é

30
00:02:53,880 --> 00:03:01,140
o título, então esse é itemData. item. title e agora é um

31
00:03:01,140 --> 00:03:08,910
adereço que podemos usar no bloco de grade de categoria e também quero passar outro adereço que passe

32
00:03:08,940 --> 00:03:18,240
em uma função que possamos executar para navegar e o nomeei onSelect, mas você pode nomear o que quiser e aí, eu

33
00:03:18,240 --> 00:03:26,700
só quero executar o código que atualmente executo no onPress. Então, cortarei isso daqui para fora do bloco de grade

34
00:03:26,700 --> 00:03:33,000
da categoria, moverei isso de volta para a tela de categorias, para esta função que passo para

35
00:03:33,000 --> 00:03:38,700
onSelect e agora tudo o que precisamos fazer é acionar onSelect de dentro do bloco de

36
00:03:38,730 --> 00:03:48,110
grade da categoria, é claro um padrão normal que você conheceria no React. Então, de volta ao bloco de grade da categoria, o onPress pode simplesmente apontar para

37
00:03:48,320 --> 00:03:52,390
adereços onSelect para acionar a função que é passada no adereço onSelect.

38
00:03:52,550 --> 00:03:57,370
Agora, o título que estou lançando aqui também pode ser apenas adereços. title porque estamos recebendo esse suporte

39
00:03:57,380 --> 00:04:03,380
de título como suporte em nosso bloco de grade de categorias que estamos passando aqui.

40
00:04:05,100 --> 00:04:11,460
Com isso, dividimos nosso componente um pouco, mas é claro que agora eu também quero

41
00:04:11,460 --> 00:04:17,130
trabalhar um pouco mais no estilo. Então, voltando ao bloco de grade da categoria,

42
00:04:17,130 --> 00:04:21,580
por exemplo, quero usar a cor que estou configurando, porque cada categoria recebe uma cor

43
00:04:21,660 --> 00:04:28,620
armazenada nessa propriedade de cor aqui, por isso seria bom usá-la. Portanto, também podemos encaminhar o bloco de grade da categoria, avançar a cor aqui; é

44
00:04:28,620 --> 00:04:34,070
claro, você pode nomear esse suporte o que quiser no item. propriedade de cor

45
00:04:34,200 --> 00:04:40,950
e aqui, tem que ser. color porque nomeamos a cor da propriedade aqui no modelo e agora

46
00:04:40,950 --> 00:04:44,360
em um bloco de grade de categoria, podemos usar essa cor para estilizá-la aqui.

47
00:04:44,460 --> 00:04:50,760
Então, como estilizar isso, como isso deve ser? Ao adicionar um estilo à visualização que temos

48
00:04:50,760 --> 00:04:56,460
dentro da opacidade palpável, porque o próprio componente de opacidade palpável é invisível, mas a

49
00:04:56,460 --> 00:05:01,250
visualização não existe, podemos passar um objeto e definir a cor do plano

50
00:05:01,260 --> 00:05:04,620
de fundo como adereços. cor.

51
00:05:04,740 --> 00:05:08,860
Bem, vamos ver como é isso, se salvarmos isso e esperarmos que isso seja

52
00:05:08,950 --> 00:05:11,080
recarregado, não parecerá muito ruim, mas é

53
00:05:11,110 --> 00:05:15,970
muito pequeno, deve preencher todo o item da grade e não apenas a linha com o texto.

54
00:05:16,180 --> 00:05:25,210
Então, para melhorar isso, eu vou ter esse estilo embutido aqui, mas vou mesclar isso em um objeto circundante com outra

55
00:05:25,210 --> 00:05:33,770
configuração de estilo que eu configurei na folha de estilo e nomeiei esse contêiner, você pode chamá-lo como quiser deseja,

56
00:05:33,790 --> 00:05:35,610
contêiner de estilos,

57
00:05:35,680 --> 00:05:39,270
retire todos os pares de valores-chave também para

58
00:05:39,620 --> 00:05:47,450
que possamos mesclar esses estilos aqui e agora, contêiner é um objeto da folha de estilo que podemos

59
00:05:47,540 --> 00:05:54,530
adicionar lá e aqui, podemos definir o flex one para garantir que cada item preenche todo

60
00:05:54,530 --> 00:05:58,880
o espaço que ganha e agora isso parece muito melhor.

61
00:05:59,030 --> 00:06:02,330
Agora ainda não estou 100% feliz, quero

62
00:06:03,080 --> 00:06:10,080
adicionar um pouco de raio de borda aqui, digamos que 10 tenha cantos arredondados e, é

63
00:06:10,400 --> 00:06:14,310
claro, você pode configurar qualquer estilo que quiser aqui,

64
00:06:14,570 --> 00:06:28,320
se preferir, eu também configurará uma cor de sombra preta e uma opacidade de sombra de. 26 e um deslocamento de sombra de largura 0, altura 2 e raio de sombra

65
00:06:28,380 --> 00:06:37,010
de 10 e elevação de 3, elevação para Android se você se lembrar, porque essas propriedades de sombra afetam apenas

66
00:06:37,020 --> 00:06:42,720
o iOS, para que possamos obter um pouco desse cartão tridimensional olhe

67
00:06:42,810 --> 00:06:48,680
e, é claro, como mencionei, você pode estilizar isso da maneira que desejar.

68
00:06:48,690 --> 00:06:54,240
Agora, além disso, quero garantir que este texto fique no canto inferior direito e tenha um pouco

69
00:06:54,240 --> 00:06:55,380
de preenchimento ao

70
00:06:55,380 --> 00:07:00,960
redor, é claro, um pouco de espaçamento ao redor. Então, adicionarei um pouco de preenchimento aqui, digamos 10

71
00:07:01,140 --> 00:07:08,730
e agora defina o conteúdo justificado para flex-end, a direção da flexão no contêiner é obviamente de cima para baixo porque é coluna, então o flex

72
00:07:08,730 --> 00:07:14,340
end moverá isso para o embaixo aqui e agora para também movê-lo para a direita no eixo horizontal, defino

73
00:07:14,340 --> 00:07:17,100
os itens de alinhamento para flexionar também a

74
00:07:17,220 --> 00:07:22,770
extremidade e isso move isso para o final do eixo transversal, que é deixado da esquerda para a direita

75
00:07:22,800 --> 00:07:29,900
em uma visualização normal onde você não mude a direção do flex. Com isso, obtemos esse visual que eu diria que

76
00:07:29,930 --> 00:07:36,230
é melhor, mas é claro, o texto aqui, o estilo do texto também pode mudar e um pouco

77
00:07:36,230 --> 00:07:37,430
mais de preenchimento

78
00:07:37,430 --> 00:07:43,100
pode parecer bom, talvez 15, mas é claro que podemos experimentar isso e também Uma observação

79
00:07:43,100 --> 00:07:47,330
importante: neste aplicativo, não vou focar na construção de uma experiência

80
00:07:47,330 --> 00:07:53,450
totalmente responsiva aqui, tentarei manter isso breve e conciso, porque o foco principal deste módulo, é claro,

81
00:07:53,690 --> 00:07:58,720
é a navegação; portanto, não otimizo isso. para todas as telas e plataformas possíveis.

82
00:07:58,720 --> 00:08:01,200
É claro que isso é algo que você

83
00:08:01,250 --> 00:08:06,860
pode fazer como prática. Não vou aderir para não inchar desnecessariamente este módulo; portanto, configurarei um estilo que

84
00:08:06,860 --> 00:08:08,450
ficará bem nesses emuladores.

85
00:08:08,450 --> 00:08:14,520
Dito isto, um pouco mais de preenchimento pode fazer sentido e eu também quero

86
00:08:14,720 --> 00:08:17,740
estilizar o título aqui, portanto, adicionarei, digamos,

87
00:08:17,810 --> 00:08:19,330
o estilo

88
00:08:19,430 --> 00:08:22,040
do título aqui, configurado na folha

89
00:08:22,040 --> 00:08:28,670
de estilo, vamos adicioná-lo aqui e ali, quero usar minha família de fontes, open sans

90
00:08:28,670 --> 00:08:39,110
bold, que posso usar, é claro, porque estou registrando-a aqui no aplicativo. js, então open sans bold é adicionado agora aqui e talvez também mude o tamanho da

91
00:08:39,110 --> 00:08:42,870
fonte um pouco para 22. Nós salvamos isso,

92
00:08:42,880 --> 00:08:45,340
isso parece bastante decente.

93
00:08:45,470 --> 00:08:48,560
Agora, há uma última coisa que eu quero

94
00:08:49,750 --> 00:08:58,330
fazer no meu bloco de grade de categorias, no texto aqui, vou definir o número de linhas como 2, para que qualquer texto que seja maior

95
00:08:58,330 --> 00:09:07,800
que o realmente seja cortado, o que eu acho que parece um pouco melhor. E por último, mas não menos importante, você pode

96
00:09:07,870 --> 00:09:14,560
perceber que no Android é leve e agradável, isso fica à esquerda aqui porque

97
00:09:14,560 --> 00:09:19,670
está dividido em duas linhas, para garantir que também esteja à

98
00:09:19,720 --> 00:09:27,900
direita, no título aqui, definirei alinhar o texto à direita para forçar que ela fique à direita.

99
00:09:28,000 --> 00:09:30,420
Então, vamos esperar que isso seja

100
00:09:33,070 --> 00:09:35,720
recarregado e agora está parecendo o que deveria.

101
00:09:35,720 --> 00:09:38,020
Agora isso não é tão ruim

102
00:09:38,060 --> 00:09:43,850
aqui, agora você pode perceber que o efeito parece um pouco estranho se eu tocar em um item

103
00:09:43,850 --> 00:09:46,520
aqui, temos uma borda extra estranha em torno dele.

104
00:09:46,550 --> 00:09:53,750
Agora, uma coisa que ainda farei aqui é totalmente opcional, mas ainda assim, adicionarei aqui, adicionarei a API da

105
00:09:53,750 --> 00:10:00,710
plataforma e também adicionarei feedback nativo palpável para realmente usar o efeito cascata em vez de opacidade

106
00:10:00,710 --> 00:10:02,090
palpável, se suportado.

107
00:10:02,090 --> 00:10:11,600
Então, aqui, terei meu componente tocável, que por padrão é a opacidade

108
00:10:11,790 --> 00:10:21,510
palpável, mas se a plataforma. os é igual ao Android e, como você aprendeu no início do curso, a versão

109
00:10:21,510 --> 00:10:26,340
é maior ou igual a 21, então sabemos que o feedback nativo tocável é

110
00:10:26,340 --> 00:10:31,100
suportado, então definirei o componente tocável igual ao feedback nativo tocável, como este.

111
00:10:31,290 --> 00:10:35,820
Use o componente tocável aqui em vez da opacidade palpável

112
00:10:35,820 --> 00:10:38,730
e, com isso, devemos ter um bom

113
00:10:38,730 --> 00:10:41,000
efeito cascata no Android,

114
00:10:41,130 --> 00:10:46,070
no iOS temos o efeito opacidade que queremos e no Android, agora

115
00:10:46,080 --> 00:10:50,520
temos um efeito cascata, mas o estilo está desativado agora.

116
00:10:50,550 --> 00:10:57,830
No entanto, isso é algo que podemos corrigir adicionando uma visualização extra em torno disso, que recebe nosso estilo

117
00:10:57,840 --> 00:11:01,840
de itens de grade em vez do componente tocável aqui

118
00:11:02,010 --> 00:11:08,220
e, com isso, basta adicionar uma propriedade de estilo extra ao componente tocável e definir flex

119
00:11:08,220 --> 00:11:08,700
um.

120
00:11:08,730 --> 00:11:10,430
Estou fazendo isso com um estilo embutido

121
00:11:10,440 --> 00:11:16,770
aqui, rápido e sujo, você pode adicionar um estilo separado na folha de estilo. Com isso, parece e parece o mesmo no

122
00:11:16,800 --> 00:11:17,800
iOS e

123
00:11:17,910 --> 00:11:21,370
agora também no Android, o efeito cascata está lá.

124
00:11:21,370 --> 00:11:27,870
Agora, porém, ele não está usando nossos cantos arredondados; em vez disso, renderiza um quadrado ou um retângulo e você também aprendeu

125
00:11:28,080 --> 00:11:31,100
anteriormente como consertar isso. Para corrigi-lo, tudo o

126
00:11:31,110 --> 00:11:35,820
que precisamos fazer é no item da grade, adicionamos o raio da borda

127
00:11:35,910 --> 00:11:42,930
10 e, na verdade, adicionamos o estouro oculto para garantir que os itens filhos não possam ser renderizados fora dessa

128
00:11:42,930 --> 00:11:43,950
exibição de

129
00:11:43,950 --> 00:11:49,010
agrupamento, o que significa que a ondulação efeito não pode sair dessa caixa arredondada.

130
00:11:49,020 --> 00:11:54,540
Agora temos essa aparência e esse é o único ajuste que quero fazer aqui para diferentes plataformas

131
00:11:54,540 --> 00:11:58,050
e, com isso, isso não parece tão ruim, eu diria.

132
00:11:58,050 --> 00:12:04,110
Agora, é claro, você pode alterar a aparência disso, o tamanho da fonte e assim por diante, fazer com que

133
00:12:04,110 --> 00:12:07,080
pareça realmente bom nos dispositivos que você está testando.

134
00:12:07,080 --> 00:12:11,940
Estou feliz com esse visual e agora é hora de renderizar algumas receitas quando

135
00:12:11,970 --> 00:12:13,470
selecionamos uma categoria aqui.