1
00:00:02,210 --> 00:00:04,450
Para os itens do carrinho.

2
00:00:04,730 --> 00:00:08,030
Agora, novamente, criarei um componente separado para cada item do carrinho

3
00:00:08,030 --> 00:00:09,240
que desejo gerar aqui.

4
00:00:09,260 --> 00:00:15,200
Eu poderia fazê-lo aqui, mas, novamente, será um componente um pouco mais longo e não quero inchar esse arquivo com ele

5
00:00:15,200 --> 00:00:19,500
e, na verdade, também o utilizarei em outro lugar mais tarde, o que pode parecer

6
00:00:19,610 --> 00:00:23,930
estranho, pois temos apenas uma tela de carrinho, mas você verá onde mais podemos usar

7
00:00:23,930 --> 00:00:25,750
um item de carrinho mais tarde.

8
00:00:25,760 --> 00:00:30,890
Então, para isso, vamos voltar na pasta de componentes e lá na pasta de compras, talvez,

9
00:00:30,920 --> 00:00:33,680
e adicionar um CartItem. arquivo js ao lado do item do produto.

10
00:00:33,710 --> 00:00:37,480
Agora é claro que temos um componente React normal, então você conhece o jogo,

11
00:00:37,490 --> 00:00:38,850
como eles são criados.

12
00:00:39,080 --> 00:00:44,630
Importamos o React do React e, em seguida, aqui, como esse é o componente que deve gerar algo,

13
00:00:44,630 --> 00:00:50,170
importaremos vários componentes do React Native, os principais primitivos com os quais criamos a interface do usuário.

14
00:00:50,300 --> 00:00:57,990
Vou precisar de uma visualização, preciso de um texto, preciso de uma folha de estilo aqui, com certeza, e depois adicionarei minha constante aqui, item

15
00:00:57,990 --> 00:01:06,210
de carrinho que recebe adereços e, no final, aqui retornamos algum código jsx. Vou adicionar meu objeto de estilos aqui

16
00:01:06,210 --> 00:01:09,340
com a criação da

17
00:01:09,480 --> 00:01:16,050
folha de estilo e exportá-lo como um item de carrinho padrão.

18
00:01:16,170 --> 00:01:21,540
Agora, o código jsx que deve ser retornado aqui, é claro, depende sempre de você, mas terei

19
00:01:21,540 --> 00:01:28,070
uma visão aqui e, nessa visão, desejo exibir a quantidade e o título do curso, além do valor total desse item

20
00:01:28,290 --> 00:01:34,080
do carrinho, caso adicionamos mais de um, então esse não é apenas o preço de um único item,

21
00:01:34,080 --> 00:01:39,780
mas é claro que o preço é a quantidade e, na verdade, também quero ter um botão que

22
00:01:39,780 --> 00:01:41,730
permita excluir esse item do carrinho,

23
00:01:41,730 --> 00:01:43,460
um ícone da lixeira.

24
00:01:44,070 --> 00:01:53,180
Então, no final, eu vou ter uma linha aqui com um texto e esse texto terá a quantidade e o título, então

25
00:01:53,420 --> 00:02:02,850
lá eu terei a quantidade e o título e, na verdade, isso deve ser estilizado de maneira diferente, então eu vou envolver o

26
00:02:02,850 --> 00:02:09,540
quantidade aqui em um nó de texto separado e faça o mesmo para o título, para

27
00:02:10,650 --> 00:02:21,600
que eu tenha dois nós de texto separados aqui no final e, depois desse bloco de texto aqui, deve haver uma visão para agrupar outros dois elementos,

28
00:02:21,600 --> 00:02:28,060
outro pedaço de texto que é a quantia total desse item aqui; portanto, quantia e

29
00:02:28,110 --> 00:02:35,280
ao lado disso, um botão ou na verdade não um botão, mas na verdade um ícone pressionável.

30
00:02:35,280 --> 00:02:40,740
Então, eu vou construir minha própria coisa tocável com opacidade palpável e, é claro,

31
00:02:40,740 --> 00:02:46,650
você pode novamente fazer a diferenciação dessa plataforma para o efeito cascata, mas eu irei com

32
00:02:47,370 --> 00:02:54,090
opacidade nas duas plataformas aqui e importarei Ionicons de @ expo / vector-icons que já adicionamos anteriormente porque eu

33
00:02:54,090 --> 00:02:55,110
quero ter

34
00:02:55,110 --> 00:03:00,480
apenas um ícone aqui que possamos pressionar, então aqui eu quero ter uma opacidade

35
00:03:00,470 --> 00:03:07,040
palpável e envolvê-lo em torno de um ícone que possamos adicionar com Ionicons, como você adicionou anteriormente neste

36
00:03:07,100 --> 00:03:13,340
curso, com isso como um componente aqui e, em seguida, basta usar um nome que deve diferir

37
00:03:13,340 --> 00:03:19,190
de acordo com a plataforma, porque o nome é o identificador do ícone e lá podemos

38
00:03:19,190 --> 00:03:29,670
verificar o SO da plataforma e, se for o Android, o ícone que deve ser usado terá o nome de md trash caso contrário, será a lixeira do iOS

39
00:03:29,670 --> 00:03:37,410
que renderiza um bom ícone de lixeira e também podemos dar a esse ícone um tamanho de, digamos, 23, que novamente

40
00:03:37,410 --> 00:03:43,890
deve ficar bem bonito e colorido e aqui, eu vou usar o vermelho porque está removendo isso item

41
00:03:43,890 --> 00:03:52,490
por isso deve ter como um warni ng cor eu diria. A opacidade tocável quando pressionada deve fazer alguma coisa e deve encaminhar o

42
00:03:52,490 --> 00:03:54,520
evento press para o componente

43
00:03:54,520 --> 00:04:00,460
que usa o componente do item do carrinho, por isso espero obter um objeto de remoção, esse nome,

44
00:04:00,460 --> 00:04:11,170
como sempre, depende de você, que possui uma função que está no fim executado então e também podemos adicionar um estilo aqui, estilo muito simples, onde aponto o botão excluir, por exemplo, e

45
00:04:11,170 --> 00:04:14,360
essa é uma declaração de estilo que podemos adicionar posteriormente.

46
00:04:14,380 --> 00:04:17,120
Falando em estilos, é claro que há

47
00:04:17,260 --> 00:04:22,420
mais estilos a serem adicionados, por exemplo, na vista superior aqui, darei a

48
00:04:22,420 --> 00:04:25,390
ele um estilo de item de carrinho, esse

49
00:04:27,910 --> 00:04:29,410
texto aqui receberá

50
00:04:29,410 --> 00:04:37,060
um estilo de dados de item. Este texto com a quantidade pode receber um estilo que podemos nomear estilos. quantidade, novamente todos esses identificadores

51
00:04:37,060 --> 00:04:40,720
de estilo, como sempre, dependem totalmente de você.

52
00:04:41,020 --> 00:04:43,600
Aqui no título, eu tenho um

53
00:04:44,970 --> 00:04:53,970
estilo de título e, em seguida, aqui nesta exibição, adicionarei um estilo de dados do item novamente, então reutilizarei esse estilo porque quero ter

54
00:04:53,970 --> 00:05:05,760
o mesmo configurado aqui e esse valor aqui será também obter um estilo de quantidade. Então, um monte de estilos para adicionar, vamos para a folha de estilo

55
00:05:05,760 --> 00:05:06,420
e,

56
00:05:06,420 --> 00:05:09,230
aí, adicionar o item do carrinho,

57
00:05:09,450 --> 00:05:13,640
que é nosso estilo raiz, dados e quantidade de

58
00:05:13,970 --> 00:05:16,620
itens, quantidade de dados do item

59
00:05:16,850 --> 00:05:18,500
e, em seguida,

60
00:05:20,780 --> 00:05:21,890
quantidade de

61
00:05:23,500 --> 00:05:33,140
dados do item, o título aqui e a quantidade e por último, mas não a quantidade. pelo menos, o botão excluir.

62
00:05:33,140 --> 00:05:38,490
Então isso também é algo que precisamos adicionar aqui. Agora, no botão excluir, é simples, vou

63
00:05:38,500 --> 00:05:39,100
adicionar

64
00:05:39,100 --> 00:05:46,930
uma margem à esquerda de 20 para ter algum espaçamento entre o ícone e o texto que fica ao lado dele e,

65
00:05:46,930 --> 00:05:52,070
com isso, vamos ao item do carrinho.

66
00:05:52,110 --> 00:05:57,010
Lá, eu quero ter um preenchimento de 10, uma cor de fundo branca, não vou usar

67
00:05:57,010 --> 00:06:01,930
meu cartão aqui, não vou adicionar sombra aqui, você pode fazer isso, mas prefiro um visual

68
00:06:01,930 --> 00:06:02,420
diferente.

69
00:06:02,560 --> 00:06:06,700
Importante é a linha de direção flexível, para que todos os itens dessa visualização, portanto, este

70
00:06:06,700 --> 00:06:13,330
texto e essa visualização estejam próximos um do outro na mesma linha. Justificar o conteúdo deve ter espaço entre todos

71
00:06:13,330 --> 00:06:21,720
os espaços vazios entre esses dois blocos de conteúdo e também adicionarei uma margem na direção horizontal de 20 para

72
00:06:22,380 --> 00:06:24,660
que haja algum espaçamento

73
00:06:24,880 --> 00:06:29,250
à esquerda e à direita em torno dos itens do carrinho.

74
00:06:29,880 --> 00:06:36,000
Agora, os dados do item, é o estilo que estamos repetindo em torno da quantidade, título e

75
00:06:36,630 --> 00:06:46,360
quantidade e o botão excluir, os dados do item devem ter uma linha de direção flexível para garantir que os itens estejam posicionados em uma linha e

76
00:06:46,360 --> 00:06:55,370
definirei alinhar itens aqui para centralize para centralizar todo o conteúdo verticalmente. Agora, para a quantidade aqui, quero definir uma família de fontes

77
00:06:55,370 --> 00:07:05,440
open-sans, a propósito, também podemos usar uma visualização aqui em vez de um texto em torno desses dois nós de texto, porque não estou definindo

78
00:07:05,440 --> 00:07:10,220
nenhum estilo específico de texto aqui , então vamos ver, mas com

79
00:07:10,360 --> 00:07:15,430
isso, voltar para a quantidade. Podemos atribuir a isso uma

80
00:07:15,430 --> 00:07:22,240
família de fontes open-sans, uma cor talvez dessa cor cinza acinzentada que usamos anteriormente para

81
00:07:22,240 --> 00:07:27,820
preços, agora para a quantidade e tamanho da fonte 16 e talvez

82
00:07:27,820 --> 00:07:35,740
aqui e aqui para o título, definirei um família de fontes open sans bold para torná-lo em

83
00:07:35,740 --> 00:07:43,760
negrito, forneça um tamanho de fonte de 16 também e, no valor aqui, farei exatamente a mesma coisa.

84
00:07:46,090 --> 00:07:52,960
Portanto, é claro que também poderíamos mesclar isso em um e no mesmo estilo, talvez nomear esse texto principal ou

85
00:07:52,960 --> 00:07:53,820
algo assim,

86
00:07:53,830 --> 00:08:00,010
livrar-se da quantidade, pois temos as mesmas definições de estilo e agora usar o texto principal aqui em

87
00:08:00,010 --> 00:08:02,350
vez de título e aqui de quantidade.

88
00:08:05,070 --> 00:08:05,710
OK.

89
00:08:05,730 --> 00:08:06,840
Este é um

90
00:08:06,840 --> 00:08:08,900
item do carrinho, agora vamos usá-lo

91
00:08:08,970 --> 00:08:11,040
na tela do carrinho com a ajuda

92
00:08:11,280 --> 00:08:16,080
de uma lista simples, porque no momento não estamos produzindo nenhum item na tela do carrinho.

93
00:08:16,380 --> 00:08:19,740
Portanto, essa visualização aqui pode ser substituída por uma lista

94
00:08:19,740 --> 00:08:27,080
simples agora e os dados em que estamos inseridos devem ter uma matriz de itens do carrinho e é exatamente isso que

95
00:08:27,080 --> 00:08:29,030
temos aqui na constante dos

96
00:08:29,150 --> 00:08:31,700
itens do carrinho, então vamos usá-lo aqui.

97
00:08:31,700 --> 00:08:32,240
Agora,

98
00:08:32,240 --> 00:08:37,550
aqui também adicionarei um extrator de chaves e aqui você definitivamente precisará adicioná-lo para que o React Native

99
00:08:37,550 --> 00:08:43,100
saiba onde sua chave pode ser encontrada, pois cada item aqui no final é desse formato e não possui

100
00:08:43,190 --> 00:08:48,650
chave nem ID, mas sabemos que o ID do produto pode ser usado como uma chave, pois será

101
00:08:48,650 --> 00:08:49,910
exclusivo para cada item.

102
00:08:49,910 --> 00:08:54,920
Então, aqui, aponto para o item. productId no final e agora

103
00:08:54,920 --> 00:09:00,030
para renderizar item, quero usar esse carrinho que acabamos de adicionar.

104
00:09:00,140 --> 00:09:10,400
Portanto, aqui, precisamos importar o item do carrinho da pasta de componentes, a pasta da loja e, o item do carrinho e, em seguida, usar

105
00:09:11,060 --> 00:09:17,850
esse componente do item do carrinho em nossa função de renderização, onde obtemos os dados do item

106
00:09:17,850 --> 00:09:26,040
no final e depois retornamos nossa item do carrinho como este e agora no item do carrinho, precisamos passar alguns

107
00:09:26,040 --> 00:09:28,240
dados, certo? No item

108
00:09:28,250 --> 00:09:34,350
do carrinho, no momento eu tenho espaços reservados fictícios, é claro que aqui espero obter minha quantidade, digamos,

109
00:09:34,350 --> 00:09:42,080
em um suporte denominado quantidade, espero obter meu título em talvez um suporte denominado title e o valor em um suporte nomeado lá,

110
00:09:42,090 --> 00:09:47,640
chamarei de fixo para 2 para garantir que sempre tenhamos duas casas decimais lá e também tenhamos

111
00:09:47,660 --> 00:09:49,910
o prop on remove que esperamos certo.

112
00:09:49,920 --> 00:09:53,830
Então, temos quantidade, título, quantidade e remoção, então, de volta à tela do carrinho, é

113
00:09:53,830 --> 00:10:01,780
isso que precisamos adicionar, a quantidade é, obviamente, itemData. item. quantidade porque um único

114
00:10:01,780 --> 00:10:06,740
item aqui é, naturalmente, esse item e, portanto, teremos

115
00:10:06,940 --> 00:10:15,180
uma quantidade mantida e, além da quantidade, temos que passar o título, a quantidade e

116
00:10:15,330 --> 00:10:16,930
a remoção.

117
00:10:17,010 --> 00:10:22,860
Portanto, o título é obviamente itemData. item. produtos. title, esse é o nome

118
00:10:22,890 --> 00:10:30,810
que escolhi lá, pelo valor que podemos passar em itemData. item. se dermos uma olhada em

119
00:10:30,810 --> 00:10:38,550
como definimos nossos dados, isso seria a soma, esse é o valor de um item, independentemente da quantidade

120
00:10:38,790 --> 00:10:42,840
que temos lá ou respeitando a quantidade que realmente temos.

121
00:10:43,110 --> 00:10:49,770
E, por último, mas não menos importante, ao remover, devemos apontar para uma função e, no momento, não temos lógica para isso, então vou apontar para

122
00:10:49,770 --> 00:10:50,600
uma função

123
00:10:50,640 --> 00:10:57,370
vazia e agora esse é um item do carrinho que desejo renderizar isto.

124
00:10:57,400 --> 00:11:07,540
Vamos tentar. Vamos adicionar duas camisas vermelhas e um tapete azul, ir ao carrinho e agora eu

125
00:11:07,540 --> 00:11:14,940
tenho as seqüências de texto devem ser renderizadas dentro de um componente de texto e ele está apontando para o item do

126
00:11:14,950 --> 00:11:17,290
carrinho, linha 14, então vamos dar uma

127
00:11:17,380 --> 00:11:23,590
olhada nisso, sim, é aqui que meu IDE adicionou automaticamente, esse espaço em branco que quero ter aqui depois

128
00:11:23,650 --> 00:11:26,270
da minha quantidade. Eu realmente quero ter isso

129
00:11:26,440 --> 00:11:32,810
aqui, então adicionarei um espaço em branco extra aqui antes de fechar meu texto. Agora com isso, vamos tentar novamente, duas

130
00:11:32,830 --> 00:11:35,530
camisas vermelhas, um tapete azul.

131
00:11:35,580 --> 00:11:36,920
Veja a quantia

132
00:11:36,950 --> 00:11:38,470
aqui, veja o título aqui,

133
00:11:38,560 --> 00:11:41,990
veja a soma e, claro, isso também soma essa soma total.

134
00:11:43,580 --> 00:11:45,730
Agora é hora de fazer esse botão de exclusão funcionar.