1
00:00:02,190 --> 00:00:05,630
Vamos trabalhar na tela de pedidos antes de adicionar a navegação,

2
00:00:05,670 --> 00:00:07,920
não precisamos finalizá-la, mas quero poder visualizá-la.

3
00:00:08,700 --> 00:00:15,300
Então, lá, importo o React do React para poder criar um componente React válido, importo algo do React Native

4
00:00:15,300 --> 00:00:20,060
como sempre e esse algo também é o que estamos acostumados, certo?

5
00:00:20,060 --> 00:00:21,810
Nunca é tão surpreendente.

6
00:00:21,840 --> 00:00:23,050
Precisamos

7
00:00:23,370 --> 00:00:32,880
de uma visualização, provavelmente precisaremos de uma lista simples, pois teremos vários pedidos potencialmente, uma quantidade

8
00:00:32,880 --> 00:00:43,670
infinita e quero poder renderizar isso e com isso aqui, podemos criar nossa tela de pedidos dessa maneira.

9
00:00:43,790 --> 00:00:53,710
Também exportarei isso, é claro, e o estilo não deve ser realmente necessário aqui, na verdade, nem precisamos da visualização aqui, porque

10
00:00:53,770 --> 00:01:01,570
eu só quero exibir minha lista de pedidos. Portanto, é claro que os dados que precisamos aqui

11
00:01:01,720 --> 00:01:04,350
virão do Redux, portanto, devemos importar

12
00:01:04,360 --> 00:01:10,600
o seletor de uso do React Redux, que nos permite acessar a loja do Redux.

13
00:01:11,350 --> 00:01:19,330
Portanto, aqui, podemos obter nossos pedidos com a ajuda do seletor de uso e agora use o seletor no estado. pedidos e, é claro, esse é o identificador que eu

14
00:01:19,390 --> 00:01:25,740
designei aqui nos pedidos combinados de redutores aqui, isso nos dá acesso à fatia de estado

15
00:01:25,810 --> 00:01:29,680
gerenciada pelo redutor de pedidos e lá, temos

16
00:01:29,680 --> 00:01:34,040
outra propriedade de pedidos que contém o conjunto real de pedidos.

17
00:01:34,060 --> 00:01:37,860
Então aqui eu preciso acessar o estado. ordens. pedidos no final,

18
00:01:37,870 --> 00:01:41,070
isso me dá meus pedidos que são armazenados no Redux.

19
00:01:41,110 --> 00:01:48,640
Agora, aqui, basta retornar nossa lista simples e isso recebe pedidos que devem ser

20
00:01:48,640 --> 00:01:56,640
uma matriz e que são dados. Agora, um extrator de chaves não é necessário nas versões mais recentes do React Native,

21
00:01:56,640 --> 00:02:01,520
porque cada pedido, se você der uma olhada no modelo, tem um ID e as versões mais recentes

22
00:02:02,010 --> 00:02:09,780
do React devem estar procurando isso, mas, para ser seguro, adicionarei aqui e processarei o item agora, é claro, deve conter uma função que receba os dados do

23
00:02:09,780 --> 00:02:16,440
item e, no final, retorne o que queremos renderizar por pedido. Agora, um item do pedido será mais complexo no futuro;

24
00:02:16,440 --> 00:02:17,010
por

25
00:02:17,010 --> 00:02:21,990
enquanto, apenas enviarei algum texto, novamente, para que rapidamente tenhamos algo na tela que possamos

26
00:02:21,990 --> 00:02:23,670
ver antes de refinar isso.

27
00:02:24,000 --> 00:02:27,650
O texto aqui para o item especificado pode ser e agora vamos

28
00:02:27,660 --> 00:02:32,590
dar uma olhada no pedido, lá temos o ID, temos os itens que são mais uma

29
00:02:32,580 --> 00:02:32,990
lista,

30
00:02:33,000 --> 00:02:40,150
portanto, a coisa mais fácil de produzir é simplesmente a quantidade. Então, aqui, apenas mostrarei a propriedade da quantidade

31
00:02:41,050 --> 00:02:44,380
total que meu pedido tem aqui.

32
00:02:44,430 --> 00:02:46,050
É isso que eu

33
00:02:46,050 --> 00:02:48,360
mostro na lista simples, agora temos uma tela

34
00:02:48,360 --> 00:02:55,550
de pedidos básicos, é claro que agora precisamos ser capazes de alcançá-lo. Então, vamos ao navegador da loja e importe

35
00:02:55,610 --> 00:03:04,740
a tela de pedidos aqui, a tela de pedidos da pasta telas, da tela de pedidos da loja e agora aqui o importante

36
00:03:05,180 --> 00:03:11,630
é que eu não quero adicioná-lo a este navegador de pilha porque não faz parte disso pilha,

37
00:03:11,630 --> 00:03:12,590
em vez

38
00:03:12,590 --> 00:03:16,490
disso, quero acessá-lo com um menu, com um menu lateral.

39
00:03:16,730 --> 00:03:19,840
Então, precisamos criar um navegador de gavetas.

40
00:03:19,910 --> 00:03:24,430
Claro que você também pode trabalhar com guias, se preferir, mas eu quero trabalhar com uma gaveta

41
00:03:24,500 --> 00:03:26,720
aqui, por isso precisamos desse navegador de gaveta.

42
00:03:26,750 --> 00:03:31,760
Agora a tela de pedidos, mesmo que seja o único item, deve estar em sua própria

43
00:03:31,850 --> 00:03:34,490
pilha, para que também tenhamos um cabeçalho lá.

44
00:03:34,490 --> 00:03:45,550
Portanto, criarei um novo navegador de pedidos aqui, onde crio outro navegador de pilha e, lá, o único mapeamento necessário é de pedidos que apontam para a tela

45
00:03:45,550 --> 00:03:53,740
de pedidos, o segundo argumento aqui ainda deve configurar algumas opções de navegação padrão e eu usarei as mesmas opções que

46
00:03:53,740 --> 00:03:57,640
eu faço aqui, então eu vou realmente pegar esse objeto,

47
00:03:57,970 --> 00:04:04,660
cortá-lo daqui e armazená-lo em uma constante constante, opções de navegação padrão, assim, esse é um padrão

48
00:04:04,700 --> 00:04:07,170
que eu também já usei

49
00:04:08,550 --> 00:04:13,590
no módulo de navegação porque agora podemos usar essa constante aqui no

50
00:04:13,590 --> 00:04:19,830
navegador de produtos para as opções de navegação padrão e também aqui no navegador de pedidos.

51
00:04:19,830 --> 00:04:26,760
Agora, é claro que o objetivo é criar um navegador de gavetas, que eu chamo de navegador de loja em geral, porque

52
00:04:26,760 --> 00:04:29,160
combina diferentes recursos de loja que você

53
00:04:29,160 --> 00:04:36,260
poderia dizer com a ajuda de criar um navegador de gavetas. Agora, quero mesclar essas duas pilhas, o

54
00:04:36,270 --> 00:04:40,410
navegador de produtos e o navegador de pedidos, então

55
00:04:40,410 --> 00:04:48,300
aqui precisamos dos produtos com o navegador de produtos e os pedidos apontando para o navegador de

56
00:04:48,330 --> 00:04:56,160
pedidos, e também para esses navegadores de pilha. Também quero configurar minhas opções de conteúdo na gaveta.

57
00:04:56,160 --> 00:05:02,280
Isso permite, por exemplo, definir a cor da tonalidade dos itens quando eles são selecionados

58
00:05:02,280 --> 00:05:11,680
e lá quero definir a cor da tonalidade ativa como Cores. primário para que sejam coloridos com a cor principal, se estiverem selecionados.

59
00:05:11,710 --> 00:05:17,710
Agora é o navegador da loja que deve ser retornado aqui. Isso por si só não funciona, mas é o primeiro

60
00:05:17,710 --> 00:05:18,680
passo. Agora, antes

61
00:05:18,730 --> 00:05:25,870
de adicionarmos o botão de menu, vamos para a tela de pedidos e, na verdade, adicionamos um título. Por isso, adicionarei opções de

62
00:05:25,900 --> 00:05:28,630
navegação, defino-o como um objeto, No momento, não precisamos

63
00:05:28,630 --> 00:05:29,940
de opções dinâmicas aqui,

64
00:05:29,950 --> 00:05:35,680
porque eu só quero definir o título do cabeçalho para seus pedidos e agora que penso nisso, devemos

65
00:05:35,680 --> 00:05:36,290
adicionar

66
00:05:37,060 --> 00:05:38,620
isso na tela do carrinho,

67
00:05:38,710 --> 00:05:42,670
onde ainda não estou fazendo isso. Lá, eu também

68
00:05:42,670 --> 00:05:48,520
quero definir isso na tela do carrinho, defina-o no seu carrinho.

69
00:05:48,520 --> 00:05:51,200
Portanto, isso agora está nas opções de navegação da

70
00:05:51,220 --> 00:05:57,270
tela do carrinho, na tela de pedidos ou neste navegador está configurado. Com tudo isso configurado, precisamos adicionar este botão de

71
00:05:57,280 --> 00:06:04,000
menu, este ícone de hambúrguer, por exemplo, na tela de visão geral de produtos, na qual desejo abrir

72
00:06:04,000 --> 00:06:09,220
a gaveta e acessar meus pedidos. Agora, para adicioná-lo lá, vamos às opções

73
00:06:09,220 --> 00:06:13,780
de navegação da tela de visão geral do produto, que já é

74
00:06:13,780 --> 00:06:14,550
dinâmica,

75
00:06:14,860 --> 00:06:21,070
o que é bom e, além de adicionar o cabeçalho à direita para o ícone do

76
00:06:21,070 --> 00:06:29,100
carrinho, vamos adicionar headerLeft e headerLeft também devem conter botões do cabeçalho, é claro, mas existem , serão os meus itens de

77
00:06:29,220 --> 00:06:37,170
menu, então nomeei-o assim; quero usar o menu md ou o menu ios, dependendo da plataforma em que estamos rodando, e

78
00:06:37,170 --> 00:06:38,910
quero navegar, é claro, para

79
00:06:38,920 --> 00:06:46,150
lugar nenhum, em vez da navegação suporte aqui, por assim dizer, quero chamar a gaveta de alternância que abrirá

80
00:06:46,160 --> 00:06:48,950
a gaveta lateral. Agora, essa mesma

81
00:06:48,950 --> 00:06:54,920
configuração também é necessária na tela de pedidos, para que possamos sair dessa tela.

82
00:06:55,700 --> 00:07:01,820
Então, na verdade, aqui, precisaremos dessa configuração dinâmica das opções de navegação, onde temos uma função

83
00:07:01,820 --> 00:07:09,020
aqui, na qual retornamos nosso objeto de configuração, para que lá também possamos adicionar headerLeft com os botões de

84
00:07:09,020 --> 00:07:15,170
cabeçalho, com nosso menu que alterna a gaveta que se baseia nos dados de navegação aqui e,

85
00:07:15,170 --> 00:07:22,910
é claro, para isso, precisamos importar botões de cabeçalho, botão de cabeçalho e item. Portanto, na tela de visão geral do

86
00:07:22,910 --> 00:07:25,700
produto, no final, preciso importar essas coisas

87
00:07:25,700 --> 00:07:30,860
aqui, essas duas linhas precisam ser adicionadas para a tela de pedidos também.

88
00:07:30,860 --> 00:07:32,700
Então, deixe-me adicioná-lo, adicionando

89
00:07:32,840 --> 00:07:39,020
os botões de cabeçalho e a importação de itens dos botões de cabeçalho do React Navigation e

90
00:07:39,020 --> 00:07:45,300
o botão de cabeçalho importados de nosso componente personalizado. Agora, com isso, se salvarmos isso, devemos ter um

91
00:07:45,300 --> 00:07:52,410
botão de menu aqui e abrir, abre a gaveta, podemos ir para pedidos e recebo um erro aqui, porque na

92
00:07:52,890 --> 00:07:55,560
tela de pedidos, é claro que

93
00:07:55,560 --> 00:07:58,400
estou usando a plataforma API, então devemos importá-la

94
00:07:58,400 --> 00:08:08,170
para lá, vamos fazer isso, vamos adicionar plataforma e agora, se voltarmos, podemos ir para pedidos e lá também podemos voltar e o mesmo acontece no Android.

95
00:08:10,060 --> 00:08:12,160
Agora, com isso, adicionamos a gaveta.

96
00:08:12,160 --> 00:08:15,400
Há uma coisa que quero adicionar à gaveta,

97
00:08:15,400 --> 00:08:21,940
que ainda não havia feito antes de continuar trabalhando na minha lista de pedidos, ainda não estamos produzindo

98
00:08:22,240 --> 00:08:28,570
nada porque não estamos realmente adicionando pedidos, não conectamos isso botão encomendar agora, no entanto, não estamos vendo

99
00:08:28,570 --> 00:08:33,180
nada que mude se adicionarmos algo ao carrinho, clique em pedir agora uma

100
00:08:33,280 --> 00:08:37,810
vez, ao clicar nele várias vezes, ocorrerá um erro agora e então

101
00:08:37,860 --> 00:08:41,140
veremos esse pedido aqui. Agora precisamos limpar o carrinho,

102
00:08:41,140 --> 00:08:45,940
isso é outra coisa que precisamos fazer, mas antes de fazer isso, na gaveta, também quero ter

103
00:08:46,030 --> 00:08:51,340
ícones ao lado das minhas entradas aqui e adicionar esses ícones é realmente muito simples, não é? Isso

104
00:08:51,340 --> 00:08:57,640
foi feito no módulo de navegação, mas faremos isso agora. Para adicionar ícones, você só precisa ir para as telas

105
00:08:57,640 --> 00:08:59,920
nas quais está navegando na gaveta

106
00:08:59,920 --> 00:09:04,990
e, no nosso caso, esses dois navegadores são, obviamente, esses dois navegadores, portanto, não são telas,

107
00:09:05,440 --> 00:09:11,200
mas esses dois navegadores e nesses navegadores ou se eram telas , nessas telas, você pode definir opções

108
00:09:11,200 --> 00:09:17,230
de navegação e, com isso, não quero dizer as opções de navegação padrão definidas para todas as telas desse

109
00:09:17,230 --> 00:09:23,080
navegador, mas você define esse navegador se ele for usado dentro de outro navegador, como é o caso aqui.

110
00:09:23,080 --> 00:09:25,020
Portanto, podemos adicionar opções

111
00:09:25,030 --> 00:09:29,320
de navegação aqui. Novamente, isso não será aplicado às telas deste navegador.

112
00:09:29,320 --> 00:09:32,550
Em vez disso, isso configurará esse navegador se

113
00:09:32,740 --> 00:09:39,700
for uma tela de outro navegador e aqui o navegador de pedidos será uma tela do navegador da

114
00:09:39,700 --> 00:09:50,140
loja no final e, nessas opções de navegação, podemos adicionar uma entrada no ícone da gaveta, que pode ser uma função que digamos a configuração da gaveta, essa

115
00:09:51,150 --> 00:09:56,890
função é chamada por você pela opção React navigation e fornece a configuração da gaveta

116
00:09:56,890 --> 00:10:03,870
que é mais importante, por exemplo qual é a cor da sua tonalidade, porque agora você pode retornar um

117
00:10:03,880 --> 00:10:10,630
componente, como um componente Ionicons, para renderizar um ícone. Para isso, você só precisa ter certeza de

118
00:10:11,200 --> 00:10:12,780
que está importando Ionicons

119
00:10:12,790 --> 00:10:16,650
do @ expo / vector-icons, para adicionar essa importação

120
00:10:16,780 --> 00:10:23,770
no arquivo do navegador da loja e agora com isso, se descermos aqui, retornarei meu Ionicon, agora

121
00:10:23,770 --> 00:10:24,640
eu

122
00:10:24,850 --> 00:10:30,720
posso configurá-lo como sempre fazia isso e, novamente, podemos usar a API da plataforma

123
00:10:30,730 --> 00:10:39,340
que já estamos importando aqui, caso contrário, certifique-se de fazê-lo. Podemos usá-lo para verificar o sistema operacional e, se for igual

124
00:10:39,790 --> 00:10:43,820
ao Android, aqui processarei o md create como um ícone;

125
00:10:43,820 --> 00:10:49,820
caso contrário, o iOS será criado e esse é apenas um ícone que eu escolhi antecipadamente.

126
00:10:49,850 --> 00:10:56,640
Agora, é claro, também podemos configurar o tamanho aqui e seguirei meu bom e velho 23 anos. Além disso, defina

127
00:10:56,760 --> 00:11:02,130
uma cor, se desejar, e agora, é claro, que não deve ser as cores primárias,

128
00:11:02,190 --> 00:11:07,620
pois esse ícone sempre tenha essa cor; em vez disso, essa cor deve ser atribuída pela

129
00:11:07,710 --> 00:11:13,310
gaveta, o que sabe se o item está selecionado ou não e que alterará a cor adequadamente.

130
00:11:13,380 --> 00:11:16,570
Então aqui, você deve acessar a configuração da gaveta. TintColor e isso

131
00:11:16,680 --> 00:11:22,110
informa qual cor deve ter no momento e essa cor mudará dependendo se essa opção

132
00:11:22,110 --> 00:11:24,330
está selecionada ou não no momento.

133
00:11:25,370 --> 00:11:29,350
Agora, esse é o caso dos meus pedidos, desculpe-me, o

134
00:11:29,540 --> 00:11:30,470
ícone aqui

135
00:11:30,580 --> 00:11:39,080
deve ser a lista md e a lista iOS, não criar. Portanto, essa é a minha configuração de pedidos agora com os ícones da lista e,

136
00:11:39,440 --> 00:11:46,130
é claro, a mesma coisa pode ser feita aqui, copiando-a no navegador de produtos e lá, eu quero usar o md cart ou o

137
00:11:46,130 --> 00:11:54,490
iOS, então esse ícone do carrinho novamente e agora quase pronto para ser usado. No entanto, é necessário importar o React from

138
00:11:54,490 --> 00:11:59,500
React agora neste arquivo do navegador, porque agora você está

139
00:11:59,500 --> 00:12:06,610
usando componentes com essa sintaxe jsx. Como você sabe, o jsx

140
00:12:06,610 --> 00:12:14,260
é compilado ou convertido em React. createElement no final e, portanto, você precisa importar o React para

141
00:12:14,260 --> 00:12:16,190
que esta sintaxe funcione aqui.

142
00:12:16,510 --> 00:12:21,850
Agora, com isso, se você voltar, terá esses ícones legais aqui ao lado dos itens e

143
00:12:21,850 --> 00:12:23,230
eles também serão

144
00:12:23,230 --> 00:12:26,020
coloridos corretamente, também aqui no Android, é claro.

145
00:12:26,020 --> 00:12:32,110
Então, agora que a gaveta lateral terminou, também podemos ir para a tela de pedidos e até ver um

146
00:12:32,110 --> 00:12:32,920
pedido lá.

147
00:12:32,920 --> 00:12:37,450
No entanto, no momento, o carrinho não é limpo e, portanto, se você clicar nisso várias vezes, receberá

148
00:12:37,450 --> 00:12:42,520
um aviso, porque o que você faz é clicar muito rápido e, portanto, criar vários pedidos com o mesmo pseudo

149
00:12:42,790 --> 00:12:48,700
ID único em que no final, use o carimbo de data / hora atual; se você clicar muito rápido várias vezes, será o mesmo

150
00:12:48,700 --> 00:12:50,770
carimbo de data / hora. É por

151
00:12:50,860 --> 00:12:56,110
isso que esse aviso está chegando e eu gostaria de limpar o carrinho depois de fazer um pedido de qualquer maneira.

152
00:12:56,860 --> 00:13:02,050
Então, certifique-se de limpar o carrinho depois de fazer um pedido e, é claro, certifique-se de enviar os

153
00:13:02,110 --> 00:13:04,930
pedidos de uma maneira mais agradável do que atualmente.