1
00:00:02,220 --> 00:00:06,510
Vamos garantir que possamos ir para a tela de detalhes do produto, esta

2
00:00:06,510 --> 00:00:09,870
tela aqui e, antes de tudo, no componente da tela

3
00:00:09,870 --> 00:00:13,170
de detalhes do produto, bem, eu configurarei um componente importando

4
00:00:13,170 --> 00:00:15,590
React do React. Então, lá dentro,

5
00:00:15,620 --> 00:00:21,150
provavelmente também precisamos de algumas coisas do React Native, por exemplo, não pode doer

6
00:00:21,210 --> 00:00:26,940
muito ter uma visualização e um texto aqui e também uma folha de estilo e também

7
00:00:27,150 --> 00:00:32,880
o componente de imagem, a propósito, a ordem dessas importações aqui claro que não importa.

8
00:00:32,890 --> 00:00:38,430
Também quero ter um botão aqui porque também quero adicionar um botão adicionar ao carrinho e,

9
00:00:38,610 --> 00:00:47,250
na verdade, também uma exibição de rolagem, porque essa página de detalhes pode ter uma descrição muito longa do produto ou pode ser visualizada em

10
00:00:47,250 --> 00:00:52,440
um dispositivo muito pequeno e portanto, ele definitivamente deve ser rolável para que possamos sempre

11
00:00:52,440 --> 00:00:55,950
ver todo o conteúdo. Com isso aqui,

12
00:00:55,950 --> 00:01:03,940
adicionarei o componente de tela de detalhes do produto, novamente um componente funcional onde recebemos adereços, configurarei minha folha

13
00:01:04,210 --> 00:01:10,420
de estilo aqui com a folha de estilo. crie e armazene-o em uma constante de estilos e,

14
00:01:10,420 --> 00:01:17,440
é claro, exporte a tela de detalhes do produto como padrão. Com isso, vamos começar de maneira simples e retornar uma visualização

15
00:01:17,500 --> 00:01:26,340
aqui com um texto em que dizemos a tela de detalhes do produto, que está lá apenas, para que possamos ver que navegamos com sucesso por lá

16
00:01:26,340 --> 00:01:29,570
e para que possamos realmente usá-lo porque precisamos retornar o

17
00:01:29,610 --> 00:01:34,500
jsx para tem um componente válido porque a primeira coisa que quero fazer é ajustar

18
00:01:34,500 --> 00:01:39,750
a navegação e para isso no ShopNavigator. js na pasta de navegação, podemos

19
00:01:39,750 --> 00:01:42,290
importar a tela de detalhes do

20
00:01:42,420 --> 00:01:51,020
produto aqui da pasta de telas, a pasta da loja e a tela de detalhes do produto. Esse é o

21
00:01:51,020 --> 00:01:51,760
arquivo

22
00:01:51,770 --> 00:01:58,750
em que trabalhamos, é claro, e mapeá-lo para um identificador aqui, ' nomeá-lo-emos detalhes do

23
00:01:58,750 --> 00:01:59,830
produto aqui.

24
00:01:59,830 --> 00:02:03,640
Essas teclas, como você aprendeu na seção de navegação, dependem sempre

25
00:02:03,640 --> 00:02:06,070
de você, então agora mapeamos essa tela.

26
00:02:06,220 --> 00:02:09,570
Esta será a nossa tela inicial, porque este é o primeiro

27
00:02:09,580 --> 00:02:14,170
par de valores-chave, mas é uma tela para a qual podemos ir, podemos navegar para lá

28
00:02:14,170 --> 00:02:20,440
e para lá, precisamos ir para a tela de visão geral de nossos produtos e quando clicarmos em Exibir detalhe, este é,

29
00:02:20,440 --> 00:02:24,700
no final, o sinal de que queremos ir para a tela de detalhes do produto.

30
00:02:24,700 --> 00:02:32,140
Então, aqui nesta função, podemos chamar adereços de navegação de navegação, essa função de navegação que você aprendeu na

31
00:02:32,140 --> 00:02:35,260
seção de navegação e, em seguida, mostrei

32
00:02:35,320 --> 00:02:40,170
uma sintaxe na qual você passa um objeto Javascript onde você configura

33
00:02:40,180 --> 00:02:46,340
um nome de rota, que pode detalhes do produto e isso o levará à tela.

34
00:02:46,340 --> 00:02:47,920
Então agora salvamos isso e

35
00:02:47,930 --> 00:02:55,430
clicamos em ver detalhes, na verdade, vamos para a tela de detalhes do produto. Agora, como uma anotação na seção de navegação, também mostrei, é

36
00:02:55,430 --> 00:02:55,980
claro,

37
00:02:55,990 --> 00:03:02,270
que a sintaxe alternativa é que você apenas passa o nome de tela como primeiro argumento para navegar,

38
00:03:02,270 --> 00:03:03,970
para que você possa

39
00:03:03,980 --> 00:03:09,080
fazer isso também e funcionará como bem. Se também testarmos isso no

40
00:03:09,080 --> 00:03:11,750
Android, é assim que podemos chegar lá.

41
00:03:11,940 --> 00:03:19,410
Agora, obviamente, o objetivo não é apenas ir até lá, mas também encaminhar nossos dados ou nosso ID do produto pelo menos para que

42
00:03:19,410 --> 00:03:25,200
possamos carregar os dados do produto dentro do componente. Portanto, como segundo argumento aqui, passo um objeto Javascript que

43
00:03:25,710 --> 00:03:30,380
será o meu parâmetro para esta ação de navegação e aí você pode ter qualquer par

44
00:03:30,510 --> 00:03:36,060
de valores-chave que desejar, adicionarei um campo de ID do produto aqui, novamente esse nome é totalmente depende de

45
00:03:36,090 --> 00:03:42,120
você e este será itemData. item. ID porque itemData. O item aponta

46
00:03:42,120 --> 00:03:48,480
para um único produto que possui a aparência que configuramos aqui nos modelos e que possui ID

47
00:03:48,480 --> 00:03:55,350
prop, então é claro que podemos acessá-lo aqui e encaminhar. Com isso, na tela de detalhes do produto, podemos

48
00:03:55,380 --> 00:04:01,410
extrair isso, é claro, isso também é algo que você aprendeu anteriormente e que pode praticar aqui.

49
00:04:01,410 --> 00:04:11,880
Podemos obter o nosso ID do produto aqui, basta chamar adereços de navegação, obter param ID do produto e isso

50
00:04:11,880 --> 00:04:17,160
extrairá nosso ID do produto dos parâmetros que recebemos.

51
00:04:17,180 --> 00:04:22,580
Agora podemos usar esse ID para obter nosso produto e, é claro, nossos produtos são armazenados no Redux.

52
00:04:22,640 --> 00:04:29,510
Portanto, no final, precisamos importar o seletor de uso aqui do React Redux, para que possamos usá-lo para selecionar um único

53
00:04:29,510 --> 00:04:30,830
produto, digamos que

54
00:04:30,830 --> 00:04:37,220
o produto selecionado, esse nome constante, é claro também depende de você, agora seja selecionado com a ajuda do seletor

55
00:04:37,220 --> 00:04:43,010
de uso que recebe nosso estado, nosso estado Redux e, em seguida, podemos detalhar a fatia de

56
00:04:43,070 --> 00:04:51,420
produtos, novamente esse nome de fatia é o que você usa aqui nos produtos de redutores combinados no meu caso, e aí podemos obter acesso a

57
00:04:51,470 --> 00:04:54,650
todos os produtos disponíveis, exceto Claro que aqui não

58
00:04:54,680 --> 00:04:59,230
quero carregar todos os produtos disponíveis, mas, em vez disso, posso usar o método

59
00:04:59,240 --> 00:05:06,650
find para encontrar um único produto com essa função que passo para descobrir o que é executado em todos os itens da matriz

60
00:05:06,650 --> 00:05:12,560
em que obtemos o produto em que esta função retorna true e deve retornar true se o ID

61
00:05:12,560 --> 00:05:18,290
do produto que estou vendo for igual ao ID do produto que extraí dos parâmetros de rota.

62
00:05:18,290 --> 00:05:23,470
É assim que selecionamos um único produto e esse produto pode ser usado aqui,

63
00:05:23,470 --> 00:05:32,930
para que possamos produzir o produto selecionado. título por exemplo. Se agora salvarmos isso e visualizarmos os detalhes, de fato,

64
00:05:32,930 --> 00:05:33,860
aqui vejo

65
00:05:33,860 --> 00:05:37,970
a camisa vermelha; se fizer isso no tapete azul, vejo o tapete

66
00:05:37,970 --> 00:05:41,590
azul aqui, então está funcionando. Seria bom ver

67
00:05:41,720 --> 00:05:43,110
que no

68
00:05:43,280 --> 00:05:53,810
cabeçalho também e há duas opções, agora poderíamos usar adereços. conjunto de navegação param aqui e também envolva isso na chamada de efeito de uso, é

69
00:05:53,810 --> 00:05:55,030
claro, seria melhor definir

70
00:05:55,030 --> 00:06:01,880
nosso título com set param e usá-lo aqui nas opções de navegação que precisamos adicionar aos detalhes do produto para extraí-lo

71
00:06:01,880 --> 00:06:07,690
ou, na verdade, um pouco mais fácil, vamos para a visão geral do produto, onde vamos para essa

72
00:06:07,700 --> 00:06:12,710
página e, além de passar o ID do produto, também passamos o título do produto,

73
00:06:12,710 --> 00:06:17,000
porque aqui temos esse item facilmente disponível e o obtemos com a ajuda

74
00:06:17,000 --> 00:06:20,120
do itemData. item. título.

75
00:06:20,150 --> 00:06:25,400
Agora, também definimos esse parâmetro e isso facilita a extração na tela de

76
00:06:25,820 --> 00:06:31,490
detalhes do produto; nas opções de navegação, podemos adicionar opções de navegação na tela

77
00:06:33,930 --> 00:06:40,440
de detalhes do produto e agora é a forma funcional, pois precisamos extrair isso de uma maneira

78
00:06:41,730 --> 00:06:48,390
dinâmica a partir de nossos parâmetros de rota. Então, aqui temos esse objeto de dados de navegação, que

79
00:06:48,420 --> 00:06:55,590
também possui um suporte de navegação, precisamos retornar nosso objeto Javascript, nosso objeto de configuração das opções de navegação aqui, essas devem ser

80
00:06:55,620 --> 00:07:07,770
opções, é claro, e lá, podemos definir o título do cabeçalho como navData. navegação. título do produto getParam ou o que você

81
00:07:07,830 --> 00:07:11,170
escolher como identificador para isso.

82
00:07:11,190 --> 00:07:17,060
Então, aqui estou usando o título do produto porque, na tela de visão geral do produto, estou configurando isso para o título do produto.

83
00:07:19,600 --> 00:07:25,600
Com isso, estamos definindo esse cabeçalho, vamos ver se isso funciona, se tentarmos ir para a tela,

84
00:07:25,900 --> 00:07:27,130
isso parece bom,

85
00:07:27,130 --> 00:07:34,560
agora também vemos o título do produto aqui no cabeçalho. Isso está funcionando.

86
00:07:34,560 --> 00:07:39,420
Agora mencionei anteriormente que não devemos apenas ir lá pressionando os detalhes da exibição,

87
00:07:39,420 --> 00:07:41,840
mas talvez também pressionando o produto em

88
00:07:42,170 --> 00:07:47,930
geral e, para isso, podemos ir ao item do produto e, é claro, temos o botão exibir

89
00:07:47,930 --> 00:07:51,310
detalhes, mas agora podemos agrupar o item inteiro, é claro,

90
00:07:51,440 --> 00:08:01,000
em um toque e, aí, podemos usar a opacidade palpável e envolver esse item inteiro com opacidade palpável, então envolva isso em toda a nossa exibição aqui, esses

91
00:08:01,160 --> 00:08:04,430
botões ainda serão acionados de forma independente, mas agora

92
00:08:04,430 --> 00:08:09,110
também podemos pressionar em qualquer outro lugar e no onPress, agora eu também quero

93
00:08:09,130 --> 00:08:09,900
ativar

94
00:08:09,920 --> 00:08:15,710
o mesmo, o botão de detalhes da exibição, eu quero ativar a função que recebemos na exibição

95
00:08:15,740 --> 00:08:22,730
de detalhes, então simplesmente encaminharemos para a exibição de detalhes. E que com essa mudança simples, podemos pressionar

96
00:08:22,730 --> 00:08:28,970
qualquer lugar desse item para ser levado para a tela de detalhes, também no Android, onde isso

97
00:08:28,970 --> 00:08:34,080
parece um pouco feio e, em geral, seria bom ter esse efeito cascata lá.

98
00:08:34,220 --> 00:08:36,980
Agora você também aprendeu como implementar isso.

99
00:08:37,070 --> 00:08:44,760
Precisamos importar feedback nativo tocável para isso e a API da plataforma. Portanto, esse objeto de plataforma e agora

100
00:08:44,760 --> 00:08:52,980
aqui no item do produto, podemos configurar nosso componente tocável aqui ou o que você quiser nomear , deve ter um

101
00:08:52,980 --> 00:08:58,650
caractere maiúsculo para que possamos usá-lo como um elemento jsx e isso, por padrão,

102
00:08:58,660 --> 00:09:00,710
aponta para uma opacidade

103
00:09:00,720 --> 00:09:10,050
palpável, digamos, mas se o SO da plataforma for igual ao Android e a versão da plataforma for maior ou igual a 21,

104
00:09:10,050 --> 00:09:13,240
que é a versão do Android precisamos apoiar

105
00:09:13,440 --> 00:09:22,410
o efeito cascata, podemos definir cmp palpável igual a feedback nativo palpável e agora podemos substituir a opacidade palpável por lá por

106
00:09:22,410 --> 00:09:23,100
cmp

107
00:09:24,210 --> 00:09:28,120
palpável, então com essa variável que contém dois tipos

108
00:09:28,220 --> 00:09:34,040
diferentes de componentes, dependendo de onde está sendo executado e agora, se faça isso,

109
00:09:34,850 --> 00:09:40,330
ainda temos esse efeito de opacidade aqui, mas temos um efeito cascata no Android.

110
00:09:40,340 --> 00:09:48,980
No entanto, apenas lá embaixo, não na imagem e também não respeitando nossos cantos arredondados, como você pode

111
00:09:48,980 --> 00:09:49,930
ver.

112
00:09:50,390 --> 00:09:52,770
Agora, para corrigir o problema

113
00:09:52,850 --> 00:09:56,500
que não está na imagem, tudo o que precisamos

114
00:09:56,690 --> 00:10:01,990
fazer é alterar algumas configurações, basta adicionar o uso de primeiro plano aqui.

115
00:10:02,050 --> 00:10:07,570
Agora, na opacidade palpável, isso não terá efeito, mas no feedback nativo palpável, para garantir que o

116
00:10:07,570 --> 00:10:12,850
efeito cascata não se aplique ao plano de fundo, mas na verdade ao primeiro plano,

117
00:10:12,910 --> 00:10:19,180
o que significa também aos elementos que são colocados em cima do nosso palpável ou dentro do nosso componente palpável.

118
00:10:19,180 --> 00:10:25,360
Portanto, agora, isso também está na imagem e, para respeitar os cantos, os cantos arredondados, eu

119
00:10:25,360 --> 00:10:27,560
farei isso de maneira

120
00:10:27,670 --> 00:10:33,840
um pouco diferente, adicionarei um componente tocável dentro da minha vista ao redor, em vez de

121
00:10:35,550 --> 00:10:42,860
fora, assim e agora aqui, adicionarei um estouro oculto no estilo do produto que está nessa exibição que agora

122
00:10:42,870 --> 00:10:48,260
está em torno do meu componente tocável. Com isso, porém, minha sombra está perdida, como você pode

123
00:10:48,260 --> 00:10:55,710
ver, e aqui agora recebo um erro de que preciso de um único filho do React. Portanto, vamos realmente ajustar isso um pouco

124
00:10:55,710 --> 00:11:01,590
e vamos adicionar uma visão extra aqui, uma visão extra que envolve tudo,

125
00:11:01,590 --> 00:11:11,370
todo o meu componente tocável dentro dessa visão externa e nessa visão extra, adicionarei um estilo de estilos palpáveis ou qualquer outra

126
00:11:11,370 --> 00:11:19,090
coisa você deseja nomeá-lo e esse estilo palpável agora é adicionado aqui na minha folha de estilo.

127
00:11:19,180 --> 00:11:21,260
Isso agora recebe o objeto

128
00:11:21,370 --> 00:11:28,090
oculto de estouro, então adicionamos isso aqui e agora também recebe o mesmo raio da borda que temos em

129
00:11:28,090 --> 00:11:36,000
todo o carrinho, então o raio da borda de 10 aqui e isso garantirá a manutenção da sombra, para que ainda funciona

130
00:11:36,000 --> 00:11:41,220
porque o estouro oculto teria cortado isso e agora, para livrar-se desse outro erro

131
00:11:41,220 --> 00:11:47,230
aqui, podemos simplesmente envolver mais uma exibição em todo o conteúdo dentro do componente tocável, para que

132
00:11:47,240 --> 00:11:52,890
cumpramos este critério de ter apenas um item filho no componente tocável e agora com isso,

133
00:11:52,890 --> 00:11:58,620
temos o mesmo comportamento de antes no iOS. A propósito, o carrinho de compras não aciona

134
00:11:58,620 --> 00:12:01,940
essa navegação de detalhes que é boa e no Android,

135
00:12:02,070 --> 00:12:06,780
agora também temos o efeito cascata que respeita nossos cantos arredondados, o que nos leva

136
00:12:07,050 --> 00:12:12,270
à visualização de detalhes e o carrinho de compras também não faz o que não deveria .

137
00:12:12,270 --> 00:12:15,050
Então, com isso, agora temos a navegação que precisamos,

138
00:12:15,060 --> 00:12:17,210
temos a aparência que precisamos aqui.

139
00:12:17,490 --> 00:12:23,490
Agora podemos ir para a página de detalhes e agora devemos ter certeza de que essa página de detalhes também tenha a aparência que

140
00:12:23,490 --> 00:12:24,020
deve ter.