1
00:00:02,200 --> 00:00:08,590
Portanto, certifique-se de que os itens de nossos produtos na tela de visão geral do produto pareçam um

2
00:00:11,860 --> 00:00:16,520
pouco mais agradáveis do que atualmente. Agora, é claro, cada item do produto é processado

3
00:00:16,540 --> 00:00:22,090
apenas como um texto, como um componente de texto e não é isso que eu quero aqui. Em vez disso, removerei essa importação e

4
00:00:22,090 --> 00:00:24,970
criarei um novo componente que deve ser responsável pelo item do meu produto.

5
00:00:25,060 --> 00:00:31,540
Agora, uma observação importante sobre o local onde criamos esse componente, podemos criá-lo aqui na

6
00:00:31,560 --> 00:00:35,510
Visão geral de produtos. js também, é claro que podemos

7
00:00:35,530 --> 00:00:41,890
ter mais de um componente por arquivo, então aqui eu poderia adicionar o componente do item do meu produto ou como você

8
00:00:41,890 --> 00:00:47,250
quiser chamá-lo, assim, então podemos usar esse componente nesse arquivo, o que é claro o que eu pretendo fazer.

9
00:00:47,290 --> 00:00:52,870
Esse é um padrão que você pode usar se tiver um componente realmente fortemente vinculado a outro componente e

10
00:00:53,080 --> 00:00:57,070
estiver apenas dividindo-o para que cada componente seja um pouco mais legível.

11
00:00:57,370 --> 00:01:03,160
Depois que esses componentes separados ficarem muito grandes, você ainda deve dividi-los em arquivos separados, para que seus

12
00:01:03,190 --> 00:01:08,350
arquivos fiquem pequenos e se as pessoas quiserem dar uma olhada em um dos dois componentes,

13
00:01:08,350 --> 00:01:12,700
elas não precisarão rolar o outro componente eles podem não estar interessados.

14
00:01:12,820 --> 00:01:18,730
Portanto, é uma coisa a ter em mente. Obviamente, se você também planeja usar um componente em

15
00:01:19,150 --> 00:01:25,990
outro componente, sempre deve armazená-lo em um arquivo separado, não apenas para exportá-lo como padrão, porque também pode exportá-lo se ele

16
00:01:25,990 --> 00:01:29,950
for armazenado junto com outro componente, esse não é o principal motivo,

17
00:01:30,520 --> 00:01:36,550
mas principalmente para deixar bem claro que este é um componente independente que pode e será usado em diferentes

18
00:01:36,550 --> 00:01:38,310
partes do seu aplicativo.

19
00:01:38,350 --> 00:01:45,550
Agora, o item do produto aqui não será apenas super pequeno, o que, por si só, seria um motivo para colocá-lo

20
00:01:45,550 --> 00:01:51,460
em um arquivo separado, mas também o usarei em um componente diferente posteriormente ou em diferentes

21
00:01:51,460 --> 00:01:57,970
locais do aplicativo, além de ser relevante para a tela de visão geral dos produtos e, portanto, eu o

22
00:01:57,970 --> 00:02:04,030
adicionarei na pasta de componentes e nessa pasta de componentes. Para organizar um pouco meus componentes, adicionarei

23
00:02:04,120 --> 00:02:10,300
uma subpasta de loja na qual desejo colocar todos os componentes diretamente relacionado ao recurso de loja ou

24
00:02:10,300 --> 00:02:12,950
aos recursos em geral do meu aplicativo.

25
00:02:13,090 --> 00:02:19,390
Então, na subpasta da loja, adicionarei este ProductItem. js e você verá quais outras pastas

26
00:02:19,390 --> 00:02:21,540
adicionarei aqui mais tarde.

27
00:02:21,550 --> 00:02:27,640
Agora, novamente, todos esses padrões e práticas que estou mostrando a você aqui são apenas maneiras possíveis de fazer isso;

28
00:02:28,360 --> 00:02:34,480
em geral, nos meus cursos e também neste curso, mostro todas as melhores práticas que você pode usar, mas geralmente na

29
00:02:34,480 --> 00:02:37,270
programação, não há apenas uma maneira certa ou

30
00:02:37,390 --> 00:02:43,180
errada; portanto, as práticas e padrões que mostro aqui são práticas e padrões que você também verá em outros

31
00:02:43,180 --> 00:02:48,670
projetos, mas também poderá ver outras estruturas de pastas. No final, você sempre pode trabalhar com a estrutura

32
00:02:48,670 --> 00:02:55,480
que funciona para você, não há uma escolha certa ou errada aqui, só quero explicar meu raciocínio sobre o uso dessa estrutura que,

33
00:02:55,480 --> 00:03:00,910
espero, ajudará você a entender por que eu a uso e por que vale a pena pensar nisso.

34
00:03:01,900 --> 00:03:10,960
Então, aqui, o arquivo do item do produto, o ProductItem. É claro que o arquivo js conterá o componente do item do produto, que

35
00:03:10,960 --> 00:03:16,110
é um componente funcional normal que recebe adereços e, no final, retornará o código jsx e, portanto,

36
00:03:16,120 --> 00:03:22,750
como ele contém o código jsx, precisamos importar o React do React e aqui, também importe coisas do React Native porque

37
00:03:23,170 --> 00:03:30,070
aqui agora vou trabalhar com essas primitivas do React Native para realmente construir meu componente porque a partir daí, precisarei da visualização, precisarei

38
00:03:30,520 --> 00:03:34,930
do texto, também quero usar a imagem, porque ' mostramos a imagem do produto

39
00:03:34,930 --> 00:03:42,310
aqui e também a folha de estilo, porque definitivamente definiremos isso. Portanto, você também pode adicionar uma constante de estilos aqui,

40
00:03:42,310 --> 00:03:48,190
que criamos com a Folha de estilo. criar para o qual passamos um objeto Javascript

41
00:03:48,190 --> 00:03:56,170
e, no final, exportamos esse item do produto aqui como padrão, é claro. Agora, neste componente, quero dizer, podemos começar a criar o

42
00:03:56,170 --> 00:04:02,350
código jsx que compõe o item do produto e este será um componente de apresentação,

43
00:04:02,350 --> 00:04:08,500
o que significa que não haverá lógica aqui, não gerenciaremos nenhum estado interno, esse será

44
00:04:08,530 --> 00:04:14,630
apenas um componente que podemos usar em outros componentes para obter o estilo e o

45
00:04:14,630 --> 00:04:21,250
layout corretos, assim, este componente aqui será responsável por usar determinados componentes do React Native e

46
00:04:21,400 --> 00:04:28,090
colocá-los e estilizá-los de uma certa maneira. Então, aqui, no final, quero retornar uma

47
00:04:28,090 --> 00:04:34,150
visão que envolva tudo, que organize tudo, que também podemos estilizar para obter esse

48
00:04:34,150 --> 00:04:42,100
visual de carrinho com talvez uma sombra, talvez cantos arredondados, o que você quiser e lá dentro, agora

49
00:04:42,100 --> 00:04:50,460
tem partes diferentes, por exemplo, definitivamente vamos ter a imagem lá, a imagem do produto, eu também quero ter

50
00:04:50,460 --> 00:04:53,480
o título e o preço, então vamos

51
00:04:53,700 --> 00:05:04,630
precisar de algum texto aqui, então, para o título aqui e aqui, então pelo preço em dólares e abaixo disso, também quero ter uma visualização

52
00:05:05,200 --> 00:05:07,650
com botões, para que aqui

53
00:05:07,650 --> 00:05:14,680
possamos usar o componente de botão incorporado no momento, onde possamos adicionar um produto ao carrinho

54
00:05:14,680 --> 00:05:22,120
ou também visualizar os detalhes , então onde temos essas duas opções basicamente e, é claro, precisaremos

55
00:05:22,120 --> 00:05:26,760
adicionar manipuladores onPress aqui. Então esse é o esqueleto básico, provavelmente não

56
00:05:26,770 --> 00:05:30,880
o final, teremos que ver como podemos estilizar tudo aqui, mas esse é o

57
00:05:30,930 --> 00:05:32,390
layout que eu quero.

58
00:05:32,500 --> 00:05:37,460
Apresento meus botões aqui à vista, a propósito, porque quero tê-los lado a lado na linha e,

59
00:05:37,510 --> 00:05:43,030
tendo uma vista ao redor deles, podemos estilizar essa vista de modo que use a linha de direção flexível e

60
00:05:43,040 --> 00:05:43,960
assim por diante.

61
00:05:43,990 --> 00:05:45,040
Portanto,

62
00:05:45,040 --> 00:05:47,320
é uma configuração com a

63
00:05:47,440 --> 00:05:49,850
qual podemos trabalhar aqui, agora vamos

64
00:05:49,960 --> 00:05:53,980
adicionar um pouco de estilo e, para isso, quero

65
00:05:53,980 --> 00:05:59,980
usar ou começar aqui na vista circundante, onde configuro estilos de produtos como este;

66
00:05:59,980 --> 00:06:03,900
portanto, aqui na folha de estilos, adiciono produtos assim,

67
00:06:04,020 --> 00:06:07,200
adicione minha chave do produto aqui e,

68
00:06:07,210 --> 00:06:17,650
claro, agora novamente, é totalmente com você como você deseja estilizar isso, quero ter essa aparência de cartão, portanto, adicionarei uma sombra, cor da sombra

69
00:06:17,650 --> 00:06:27,580
que pode ser preta, uma opacidade da sombra que pode ser 0. 26, um deslocamento de sombra em que tenho o deslocamento de largura de zero e

70
00:06:27,610 --> 00:06:32,080
um deslocamento de altura de dois e um raio de sombra de oito,

71
00:06:32,080 --> 00:06:36,490
talvez e, como sempre, brinque com esses valores para encontrar sua configuração.

72
00:06:36,490 --> 00:06:39,320
Agora você deve se lembrar de que a sombra

73
00:06:39,340 --> 00:06:45,670
só funciona no iOS; portanto, para Android, adicionarei a propriedade elevação aqui e definirei isso para cinco, talvez, novamente,

74
00:06:45,670 --> 00:06:48,070
você pode experimentar diferentes valores também e

75
00:06:48,160 --> 00:06:52,500
quero ter um raio de borda de 10, porque Quero cantos arredondados e

76
00:06:52,510 --> 00:06:54,250
de novo, isso é

77
00:06:54,250 --> 00:07:00,400
algo que quero aqui, algo que você não precisa fazer. Também adicionarei uma cor de fundo em branco para garantir

78
00:07:00,430 --> 00:07:05,290
que nosso carrinho aqui, nosso produto sempre tenha essa cor de fundo, mesmo que nosso aplicativo

79
00:07:05,290 --> 00:07:14,190
principal use uma cor de fundo diferente posteriormente. Então esse é o meu produto, meu invólucro aqui em todo o produto. Além disso, também quero configurar minha altura aqui,

80
00:07:14,190 --> 00:07:16,920
cada produto deve ter uma altura de

81
00:07:16,920 --> 00:07:21,750
300 pixels e, claro, esse é um valor que você também pode ajustar aos

82
00:07:21,750 --> 00:07:22,670
seus requisitos.

83
00:07:22,740 --> 00:07:28,050
É claro que você também pode dinamizar isso com a API de dimensões, como aprendeu

84
00:07:28,050 --> 00:07:34,830
no módulo responsivo, e adicionarei uma margem de 20 em todas as direções ao redor de cada item do produto,

85
00:07:34,860 --> 00:07:42,070
para que tenhamos um espaçamento em todas as direções. Com essa configuração, podemos começar a trabalhar na saída de algo,

86
00:07:42,230 --> 00:07:47,330
para que a imagem precise de uma fonte e teremos uma imagem de rede aqui, porque se

87
00:07:47,330 --> 00:07:52,940
você der uma olhada nos dados fictícios, todos esses URLs de imagem aqui são URLs, é também isso que

88
00:07:52,940 --> 00:07:54,260
no modelo, esperamos

89
00:07:54,290 --> 00:07:59,480
um URL aqui, portanto, para uma imagem de rede e isso seria o padrão para qualquer loja

90
00:07:59,480 --> 00:08:06,740
que você construa, porque você nunca incluirá todas as imagens do produto em seu aplicativo, pelo menos se não houver loja de aplicativos para

91
00:08:06,740 --> 00:08:09,070
um jogo, mas se for uma loja onde

92
00:08:09,110 --> 00:08:14,070
as pessoas possam criar produtos, obviamente as pessoas criarão produtos dinamicamente após a distribuição do aplicativo,

93
00:08:14,240 --> 00:08:20,300
portanto, é impossível incluir todas as imagens no aplicativo, em vez disso, elas devem ser armazenadas em um servidor .

94
00:08:21,450 --> 00:08:26,740
Portanto, aqui, precisamos passar um objeto para a origem onde definimos a propriedade URI e que

95
00:08:26,910 --> 00:08:32,120
agora será recebida de fora porque esse componente do item do produto é de apresentação. Portanto,

96
00:08:32,130 --> 00:08:38,060
qualquer dado a ser exibido precisa ser passado por objetos e lá, nós poderia esperar o suporte de

97
00:08:38,070 --> 00:08:40,680
imagem, mas, como todos os acessórios de

98
00:08:40,680 --> 00:08:47,610
seus próprios componentes, você pode escolher qualquer nome que desejar. Para o título, espero obter um suporte de título e pelo preço, espero

99
00:08:47,610 --> 00:08:52,740
obter um suporte de preço, vou manter o cifrão aqui a propósito, porque o preço será apenas um número e,

100
00:08:52,740 --> 00:08:55,210
é claro, quero ter um cifrão na frente disso.

101
00:08:55,350 --> 00:09:02,640
Agora, uma pequena nota aqui, quero ter certeza de que o preço que recebo sempre tenha exatamente duas casas decimais, e

102
00:09:03,020 --> 00:09:10,520
podemos conseguir isso chamando para corrigir isso e passando duas. Fixar é uma função disponível em números

103
00:09:10,560 --> 00:09:17,940
em Javascript, que converte isso em basicamente uma string com uma quantidade fixa de

104
00:09:17,940 --> 00:09:21,870
casas decimais e aqui restrito a sempre

105
00:09:21,870 --> 00:09:23,210
serem duas

106
00:09:23,280 --> 00:09:34,310
casas decimais, isso é Javascript normal, nada específico para React Native. Agora, quando pressionamos o botão de exibição de detalhes, acionarei adereços na exibição de detalhes,

107
00:09:34,400 --> 00:09:41,960
então uso novamente um nome aqui que você pode configurar ou nomear como desejar, mas a idéia aqui é que

108
00:09:41,960 --> 00:09:47,240
os adereços na exibição apontem para uma função que o final é executado quando

109
00:09:47,240 --> 00:09:51,220
esse botão é pressionado e, portanto, aqui, se esse

110
00:09:51,230 --> 00:09:58,900
botão, o botão do carrinho for pressionado, apontarei para uma função que espero obter no suporte ao add no carrinho.

111
00:09:58,940 --> 00:09:59,300
Novamente,

112
00:09:59,540 --> 00:10:03,650
você pode nomear esses adereços como quiser, mas ao usar seu componente,

113
00:10:03,740 --> 00:10:10,370
é necessário garantir que eles estejam disponíveis e que eles obtenham valores que são funções que são acionadas por esses botões.

114
00:10:10,370 --> 00:10:14,300
Agora estamos recebendo todos os dados. Agora, para a imagem, como

115
00:10:14,420 --> 00:10:21,440
essa é uma imagem de rede, precisamos configurar a largura e a altura, porque a imagem não pode ver isso com antecedência, pois

116
00:10:21,440 --> 00:10:24,600
poderia fazer isso para uma imagem local, não pode fazer

117
00:10:24,620 --> 00:10:31,810
isso para uma rede imagem, então aqui eu vou apontar para estilos. image e adicionarei essa chave de imagem à minha folha de estilo por enquanto.

118
00:10:31,820 --> 00:10:37,790
Novamente, geralmente você decide como estilizar isso, mas eu definirei isso para ter uma largura de, digamos, 60%,

119
00:10:37,790 --> 00:10:38,750
lembre-se de

120
00:10:38,750 --> 00:10:46,580
que o produto geral tem uma largura de 100%, mas uma altura de 60%, porque o produto geral o item aqui tem uma

121
00:10:46,580 --> 00:10:52,730
altura de 300 e eu quero ter a imagem lá, que também deve ocupar a maior parte da

122
00:10:53,000 --> 00:10:58,520
altura, mas também tenho o título, o preço e meus botões, e eles também devem caber

123
00:10:58,520 --> 00:10:59,920
lá, então eu '

124
00:11:00,020 --> 00:11:02,240
darei à imagem 60% da altura para

125
00:11:02,360 --> 00:11:10,560
que as outras coisas aqui possam dividir os 40% restantes entre elas. Então, com isso, essa é a imagem, agora é claro

126
00:11:10,560 --> 00:11:16,230
que a imagem não é tudo o que temos aqui, também temos nosso título, temos

127
00:11:16,230 --> 00:11:18,800
nosso preço e também quero estilizá-lo.

128
00:11:18,840 --> 00:11:24,980
Então, para o título, adicionarei o estilo do título aqui e pelo preço, acrescentarei, digamos, um estilo

129
00:11:25,080 --> 00:11:32,490
de preço e, aqui, para esses botões, também adicionarei um estilo à vista circundante e nomearemos isso ações e, claro,

130
00:11:32,490 --> 00:11:41,020
todos esses nomes de estilo, como sempre, são totalmente com você. Aqui, quero adicionar meu título,

131
00:11:41,050 --> 00:11:54,860
o preço e a propriedade actions à minha folha de estilo, aqui e agora para o título, é claro que

132
00:11:54,860 --> 00:11:59,900
você pode estilizar isso da maneira que desejar.

133
00:11:59,910 --> 00:12:01,970
Não temos fontes personalizadas aqui, adicionarei

134
00:12:02,070 --> 00:12:05,430
algumas em breve, mas, no momento, ignorarei isso e começarei

135
00:12:05,610 --> 00:12:11,610
com um tamanho de fonte 18 e quero adicionar uma margem vertical, de modo que a parte superior e inferior

136
00:12:11,610 --> 00:12:21,570
de 3 ou 4, uma margem muito pequena, mas ainda uma margem em torno deste título. Pelo preço, definirei um tamanho de fonte 14

137
00:12:21,840 --> 00:12:30,490
para um pouco menor e também darei uma cor que talvez seja 888, que é

138
00:12:30,530 --> 00:12:34,380
como uma cor cinza acinzentada escura.

139
00:12:34,380 --> 00:12:39,760
Agora, ações são colocadas nessa exibição que contém os botões e, portanto, quero garantir que o botão

140
00:12:39,760 --> 00:12:42,450
fique próximo um do outro, em uma linha.

141
00:12:42,670 --> 00:12:53,860
Então, eu darei a isso uma direção flexível da linha aqui e também justificarei o conteúdo para ter todo o espaço restante entre eles. Além

142
00:12:53,860 --> 00:13:02,980
disso, quero alinhar os itens no centro verticalmente, de modo que ao longo do eixo transversal, que, para uma

143
00:13:02,980 --> 00:13:06,910
direção flexível, da linha é o eixo vertical.

144
00:13:06,910 --> 00:13:08,890
Com isso, temos um estilo básico, agora

145
00:13:08,890 --> 00:13:14,920
vamos usar esse componente antes de refinar a configuração e o estilo. Portanto, o componente do item do produto que

146
00:13:14,920 --> 00:13:20,110
exportamos aqui no arquivo do item do produto agora pode ser usado no arquivo de

147
00:13:20,110 --> 00:13:22,850
visão geral do produto importando o item

148
00:13:22,870 --> 00:13:29,680
do produto a partir daí, vamos apontar para a pasta de componentes, para a subpasta da loja e depois para

149
00:13:29,680 --> 00:13:35,340
o item do produto e agora é isso que eu quero usar aqui quando renderizar meus itens.

150
00:13:35,350 --> 00:13:40,300
O item do produto pode ser um componente de fechamento automático porque todos os dados são recebidos por meio de adereços

151
00:13:40,300 --> 00:13:42,650
e não entre as tags de abertura e fechamento,

152
00:13:42,670 --> 00:13:45,340
agora é claro que precisamos configurar tudo o que esperamos aqui.

153
00:13:45,340 --> 00:13:50,700
Esperamos uma imagem, o título, o preço e nossos dois itens de manipulação de eventos aqui, então

154
00:13:50,710 --> 00:13:52,870
é isso que precisamos fornecer agora.

155
00:13:53,560 --> 00:13:55,390
Portanto, aqui no item do produto,

156
00:13:55,510 --> 00:14:02,140
começarei com a imagem e, claro, é itemData. item. imageUrl e você

157
00:14:02,140 --> 00:14:08,800
sempre deve se lembrar desse itemData. item aponta como um produto, conforme definido em nosso modelo de produto e,

158
00:14:08,800 --> 00:14:11,910
portanto, ele terá uma propriedade imageUrl escrita assim, se você a escrever

159
00:14:11,920 --> 00:14:17,980
de maneira diferente, é claro que precisará acessá-la de forma diferente. Além da imagem, também teremos um

160
00:14:17,980 --> 00:14:26,290
título que é itemData. item. title e, além disso, teremos o preço com

161
00:14:26,320 --> 00:14:28,500
itemData. item. price

162
00:14:28,510 --> 00:14:35,140
e, em seguida, temos nossos dois manipuladores de eventos aqui, porque temos o prop de exibição on detail e

163
00:14:35,140 --> 00:14:41,470
o on add to cart prop que precisamos adicionar. Portanto, ao ver os detalhes, algo será feito mais tarde, por enquanto

164
00:14:41,890 --> 00:14:45,150
é apenas uma função vazia e, ao adicionar ao carrinho, também será

165
00:14:45,160 --> 00:14:47,650
feito mais tarde, por agora também pode ser

166
00:14:47,650 --> 00:14:54,280
uma função vazia, é assim que o item do produto deve ser renderizado. Com isso, se salvarmos isso, é isso

167
00:14:54,320 --> 00:14:57,850
que você deve ver, ainda não é perfeito, mas

168
00:14:57,860 --> 00:15:01,640
estamos chegando lá, na verdade não é tão ruim assim.

169
00:15:01,700 --> 00:15:07,300
Agora, é claro, o que você percebe é que os botões estão coloridos da maneira errada, que esse

170
00:15:07,300 --> 00:15:12,460
espaço não é realmente usado da maneira que deve ser usado lá embaixo, que talvez também

171
00:15:12,460 --> 00:15:21,050
desejemos centralizar esse texto, mas essas são coisas obviamente nós podemos trabalhar. Então, para refinar isso, de volta ao componente de item do produto aqui,

172
00:15:21,100 --> 00:15:23,900
vamos começar com nossos dois textos aqui.

173
00:15:23,950 --> 00:15:30,790
É claro que eles devem estar centralizados e isso pode ser feito de uma maneira muito simples, envolvendo isso

174
00:15:30,790 --> 00:15:37,200
em uma visualização, movendo esses dois textos para lá, dando um estilo a essa visualização e, é claro,

175
00:15:37,250 --> 00:15:38,830
você pode nomear isso

176
00:15:38,840 --> 00:15:43,930
da maneira que quiser, eu irei nomear detalha porque meio que fazemos o layout

177
00:15:44,090 --> 00:15:52,710
dos detalhes do produto lá, então adicionarei meu estilo de detalhes aqui à folha de estilo e lá, definirei apenas o alinhamento dos itens.

178
00:15:52,880 --> 00:16:00,440
Isso usa uma direção flexível da coluna, o padrão e, portanto, centra-se no eixo transversal, sempre faz isso, mas o eixo

179
00:16:00,440 --> 00:16:04,870
transversal da coluna de direção flexível é obviamente da esquerda para

180
00:16:04,880 --> 00:16:12,920
a direita, então centraliza horizontalmente o que é o que eu quero aqui e eu ' Isso também dará uma altura de 15%.

181
00:16:12,930 --> 00:16:16,830
Lembre-se de que a imagem leva 60%, então nós damos isso

182
00:16:16,830 --> 00:16:21,070
a talvez 15%, então quase metade dos 40% restantes, não a metade E

183
00:16:21,270 --> 00:16:24,960
eu adicionarei um pouco de preenchimento aqui de 10 talvez.

184
00:16:24,960 --> 00:16:31,780
E para os botões aqui, estes estão na minha propriedade de ações, lá eu quero

185
00:16:31,800 --> 00:16:36,340
definir a altura para os 25% restantes, isso deve ser

186
00:16:36,550 --> 00:16:41,300
uma seqüência de curso, porque temos 60% aqui de altura,

187
00:16:41,460 --> 00:16:43,360
então temos 15%

188
00:16:43,450 --> 00:16:50,860
aqui, daqui aqui Quero manter os 25% restantes e, se agora salvarmos isso, isso parecerá muito melhor.

189
00:16:50,860 --> 00:16:54,360
Agora, algum preenchimento à esquerda e à direita também seria bom

190
00:16:54,370 --> 00:17:01,810
para os botões; portanto, nesta propriedade de estilo de ações, adicionarei talvez um preenchimento horizontal de 20, para que tenhamos algum espaçamento interno

191
00:17:01,810 --> 00:17:05,230
à esquerda ou à direita. Agora, para alterar a

192
00:17:05,290 --> 00:17:10,540
cor dos botões, podemos simplesmente acessar os componentes dos botões incorporados ao

193
00:17:10,550 --> 00:17:12,140
React Native e definir

194
00:17:12,170 --> 00:17:18,250
o suporte de cores aqui para as cores que, portanto, você precisa importar da pasta

195
00:17:18,260 --> 00:17:19,530
de constantes

196
00:17:19,630 --> 00:17:30,510
e do arquivo de cores e definir isso depois para cores primárias, também aqui para a segunda cor, o botão adicionar ao carrinho, o segundo botão, portanto.

197
00:17:30,550 --> 00:17:32,220
Agora, agora temos nossos

198
00:17:32,320 --> 00:17:37,090
botões aqui, adicione ao carrinho e veja os detalhes e isso não parece muito ruim.

199
00:17:37,120 --> 00:17:41,860
A única coisa que você pode notar é que não temos cantos arredondados aqui no

200
00:17:41,860 --> 00:17:48,280
topo e a razão disso é que nossa imagem é basicamente como uma sobreposição ao fundo e o fundo é

201
00:17:48,280 --> 00:17:49,570
a vista ao

202
00:17:49,570 --> 00:17:53,800
redor, a imagem não tem cantos arredondados e, portanto, se sobrepõe aos cantos

203
00:17:53,800 --> 00:17:57,350
arredondados que temos na vista circundante. Para corrigir isso, podemos agrupar

204
00:17:57,520 --> 00:18:01,200
a imagem em uma visualização separada e, como mencionei anteriormente, é

205
00:18:01,450 --> 00:18:05,580
realmente normal no React Native ter algumas visualizações aninhadas, pois, para essa

206
00:18:05,580 --> 00:18:13,480
visualização, agora podemos anexar um estilo que talvez possamos forneça um identificador de contêiner de imagem que agora podemos adicionar à nossa folha de

207
00:18:14,080 --> 00:18:20,350
estilo e agora darei a esse contêiner minha largura e altura aqui e na imagem; portanto, adicionarei uma largura

208
00:18:21,040 --> 00:18:24,850
e altura de 100% porque agora está dentro de o contêiner,

209
00:18:24,850 --> 00:18:25,900
isso aqui

210
00:18:25,950 --> 00:18:27,500
se refere ao pai, portanto,

211
00:18:27,520 --> 00:18:28,750
a este contêiner,

212
00:18:28,750 --> 00:18:31,970
então uma altura de 60% também será aplicada à

213
00:18:32,110 --> 00:18:35,200
imagem, mas nesse contêiner de imagem, agora podemos adicionar

214
00:18:35,200 --> 00:18:40,200
um raio superior esquerdo da borda de 10 e um limite superior da borda raio

215
00:18:40,210 --> 00:18:42,020
certo de 10 para que

216
00:18:42,100 --> 00:18:48,520
contornemos esses cantos e agora seja importante, adicione um excesso oculto aqui, pois isso garantirá que qualquer criança lá

217
00:18:48,520 --> 00:18:53,400
dentro, que é nossa imagem, é claro, não possa se sobrepor ao que montamos aqui.

218
00:18:53,410 --> 00:18:57,960
Portanto, agora com essa configuração, adicionamos nossos cantos arredondados aqui de volta ao topo e agora

219
00:18:57,970 --> 00:19:02,860
esses são os itens de imagem que eu quero aqui e, claro, essa também é uma lista rolável,

220
00:19:03,070 --> 00:19:08,110
na qual você também vê que essas imagens são carregadas com preguiça automaticamente, e você pode continuar trabalhando com.

221
00:19:08,800 --> 00:19:13,270
Obviamente, o próximo objetivo pode ser que também possamos visualizar a tela de detalhes.