1
00:00:02,380 --> 00:00:07,300
Então, vamos trabalhar para portar toda a nossa lógica aqui no navegador de aplicativos.

2
00:00:07,300 --> 00:00:13,870
Começamos com essa pilha fictícia aqui e isso é legal, mas no final não é o que precisamos.

3
00:00:13,900 --> 00:00:19,390
Agora cabe a você onde você faz essa configuração, mas desde que fizemos isso basicamente no arquivo do navegador

4
00:00:19,390 --> 00:00:20,560
da loja antes.

5
00:00:20,560 --> 00:00:22,330
Eu também continuarei fazendo isso lá.

6
00:00:22,360 --> 00:00:24,370
Mesmo com essa nova lógica.

7
00:00:24,370 --> 00:00:26,560
Então, o que vou fazer é um navegador de aplicativos.

8
00:00:26,560 --> 00:00:34,190
Na verdade, vou me livrar dessa minha pilha aqui e vou me livrar dessa importação e vou me

9
00:00:34,190 --> 00:00:41,290
livrar disso aqui. Vou deixar o contêiner de navegação e redefinir essa importação, mas finalmente vou mudar

10
00:00:41,290 --> 00:00:42,760
isso. um pouco.

11
00:00:42,760 --> 00:00:49,420
Mas agora vamos passar para o navegador da loja, antes de tudo, podemos excluir essa importação da navegação de reação

12
00:00:49,540 --> 00:00:50,990
que não será necessária.

13
00:00:51,100 --> 00:00:59,140
Vamos deixar o resto por enquanto, em vez dessa importação excluída, podemos importar da pilha de navegação de

14
00:00:59,350 --> 00:01:08,870
reação e tudo já é do sorteio e da pilha de anúncios que importamos, criamos o navegador de pilha do slash

15
00:01:08,870 --> 00:01:12,600
draw, importamos, criamos o navegador de desenho.

16
00:01:12,760 --> 00:01:17,050
Agora podemos rolar para baixo e deixar as opções de navegação padrão aqui, na verdade.

17
00:01:17,080 --> 00:01:24,070
Felizmente, o nome soa e como você geralmente configura as coisas e o que você pode configurar realmente

18
00:01:24,070 --> 00:01:30,490
não mudou, exatamente como você aplica a configuração alterada e, portanto, o que definitivamente precisa mudar

19
00:01:30,880 --> 00:01:40,770
é essa parte aqui do nosso primeiro navegador de pilha, por agora duplicado e posteriormente excluído ou comentado para ter uma comparação lado a lado,

20
00:01:40,770 --> 00:01:47,940
criarei uma nova constante, que chamarei de navegador de pilha de produtos apenas para que não tenhamos um

21
00:01:48,420 --> 00:01:53,130
conflito de nomes e que é realmente óbvio que isso conterá

22
00:01:53,130 --> 00:02:00,780
uma pilha de páginas e uma pilha de telas e fazemos isso com create navigator de pilha com esta

23
00:02:00,780 --> 00:02:09,770
função, o que eu mostrei antes que essa função não precise mais de parâmetros. Em vez disso, criarei uma nova constante aqui, produtos

24
00:02:09,890 --> 00:02:10,670
Navigator.

25
00:02:10,670 --> 00:02:14,750
Então agora temos um conflito de nomes, mas isso será removido de qualquer maneira.

26
00:02:14,870 --> 00:02:20,420
E agora esse é um componente de reação do componente funcional e podemos reduzir para todos os

27
00:02:20,420 --> 00:02:26,210
armazenados em um arquivo separado apenas para essa comparação lado a lado e porque tínhamos tudo nesse

28
00:02:26,420 --> 00:02:32,390
arquivo antes de agora configurar todos esses componentes do navegador com nossa navegação A configuração aqui neste único

29
00:02:32,390 --> 00:02:36,480
arquivo que o divide definitivamente é algo que você poderia considerar.

30
00:02:36,590 --> 00:02:44,450
Então, aqui está o nosso navegador de produtos e agora retornarei os produtos stack navigator dot Navigator como

31
00:02:44,450 --> 00:02:52,910
você aprendeu e nos produtos deles empilham a tela de pontos do navegador e nós tínhamos três telas antes, então

32
00:02:52,910 --> 00:02:54,860
replicarei isso duas vezes.

33
00:02:54,860 --> 00:02:57,580
Então, nós tivemos três telas lá.

34
00:02:57,710 --> 00:03:03,730
Agora, podemos configurá-los, vamos atribuir um nome à primeira tela e essa será a visão geral dos produtos.

35
00:03:03,980 --> 00:03:09,180
Agora, o componente que deve ser carregado é o componente da tela de visão geral de nossos produtos.

36
00:03:09,200 --> 00:03:19,130
Então, basicamente, o que mapeamos antes e agora para a segunda tela, o nome é detalhe do produto.

37
00:03:19,130 --> 00:03:24,530
Então, o que tínhamos aqui e certifique-se de manter esses nomes para que toda

38
00:03:24,530 --> 00:03:31,400
a lógica de navegação que você tem no seu aplicativo, porque isso não precise ser alterada, para que isso

39
00:03:31,670 --> 00:03:37,660
ainda funcione e aqui o componente que deve ser carregado quando queremos alcançar essa tela é

40
00:03:37,660 --> 00:03:45,770
o componente de tela detalhada do produto, como fizemos lá embaixo, vamos reformulá-la e, para a última tela, o nome é carrinho.

41
00:03:45,860 --> 00:03:52,630
O que tínhamos aqui e queremos ir para a tela do coração assim.

42
00:03:52,670 --> 00:03:57,920
Então agora configuramos essa pilha de navegação com essa nova lógica baseada em componentes.

43
00:03:58,010 --> 00:04:03,620
Agora podemos importar para o navegador de aplicativos e, para o pai, precisamos

44
00:04:03,620 --> 00:04:11,510
apenas adicionar uma palavra-chave de exportação na frente dele, para que essa constante esse componente seja exportada aqui neste

45
00:04:11,510 --> 00:04:21,980
arquivo e no navegador de aplicativos agora não importamos o navegador de loja, mas importamos o navegador de produtos recém-exportados importamos que aqui e em

46
00:04:22,310 --> 00:04:29,910
nosso contêiner de navegação agora podemos adicionar o navegador de produtos assim e podemos nos livrar da

47
00:04:29,910 --> 00:04:33,720
importação da tela de visão geral do produto.

48
00:04:33,840 --> 00:04:35,790
Agora, de volta ao navegador da loja.

49
00:04:36,030 --> 00:04:38,840
Vamos dar uma olhada nessas opções.

50
00:04:38,840 --> 00:04:42,360
A seguir, as opções de navegação que tínhamos aqui nesta pilha.

51
00:04:42,360 --> 00:04:45,160
O que fazemos com isso.

52
00:04:45,160 --> 00:04:52,600
Bem, na verdade, temos duas opções aqui no navegador de produtos, no navegador antigo, com a lógica

53
00:04:53,230 --> 00:04:55,370
antiga: ícone da ação.

54
00:04:55,480 --> 00:05:02,800
Essa pilha deve ter na gaveta que adicionaremos mais tarde. A segunda são nossas opções de navegação padrão, que

55
00:05:03,010 --> 00:05:07,660
devem ser aplicadas a todas as telas que fazem parte deste navegador.

56
00:05:07,660 --> 00:05:12,250
E, na verdade, também existe um terceiro lugar em que configuramos as coisas no passado.

57
00:05:12,280 --> 00:05:14,150
E isso foi em algumas das telas.

58
00:05:14,320 --> 00:05:21,680
Vamos dar uma olhada na tela de visão geral do produto, que está na pasta da loja, se rolarmos para baixo.

59
00:05:21,760 --> 00:05:28,870
Tínhamos essa propriedade de opções de navegação que adicionamos ao objeto funcional da tela de visão geral dos produtos e essa foi uma

60
00:05:28,870 --> 00:05:33,850
função na qual configuramos coisas como o título do cabeçalho, mas também o que está à

61
00:05:33,850 --> 00:05:37,630
esquerda e o conjunto direito do cabeçalho agora com essa nova lógica.

62
00:05:37,670 --> 00:05:40,650
Você não faz mais isso assim.

63
00:05:40,650 --> 00:05:46,940
Em vez disso, podemos copiar todo esse conjunto aqui.

64
00:05:47,170 --> 00:05:48,740
Então, tudo isso podemos copiá-lo.

65
00:05:48,820 --> 00:05:54,680
Podemos comentar aqui no componente de tela e ir para o componente do navegador de aplicativos.

66
00:05:54,820 --> 00:06:00,640
Com licença para comprar o componente navigator onde configuramos nossa navegação de pilha e agora

67
00:06:00,640 --> 00:06:08,830
na tela em que queremos ter essas opções, podemos adicionar um terceiro suporte e essa é a propriedade de options e duas opções.

68
00:06:08,830 --> 00:06:16,360
Você pode analisar exatamente o que você tinha no componente antes, para que você passe da função é uma função

69
00:06:16,440 --> 00:06:16,990
correta.

70
00:06:17,050 --> 00:06:18,640
Que recebe o parâmetro

71
00:06:21,330 --> 00:06:27,900
de dados NAF, que retorna um objeto de configuração, o valor concreto desse parâmetro será alimentado

72
00:06:27,900 --> 00:06:34,950
pela navegação de reação e os nomes de configuração que podemos definir aqui, o que podemos configurar não

73
00:06:34,950 --> 00:06:35,540
mudou.

74
00:06:35,670 --> 00:06:38,550
Portanto, ainda podemos configurar um título de cabeçalho à frente ou à esquerda.

75
00:06:38,550 --> 00:06:41,330
Então, tudo isso é exatamente o mesmo que você aprendeu.

76
00:06:41,340 --> 00:06:43,290
Funciona exatamente da mesma maneira.

77
00:06:43,350 --> 00:06:47,760
Felizmente agora poderíamos fazer isso aqui e fazer compras no navegador.

78
00:06:47,760 --> 00:06:55,200
Mas é claro que isso rapidamente se tornaria muito grande se tivéssemos todas as diferentes configurações

79
00:06:55,440 --> 00:06:57,630
específicas da tela aqui.

80
00:06:57,630 --> 00:07:00,390
Portanto, não é realmente o que farei aqui.

81
00:07:00,450 --> 00:07:03,150
Em vez disso, vejo duas opções.

82
00:07:03,150 --> 00:07:10,170
Uma é que realmente configuramos a tela do navegador de pilha de produtos no componente de tela.

83
00:07:10,170 --> 00:07:14,250
A segunda é que mantemos nossas opções lá e essa é a abordagem que seguirei.

84
00:07:14,730 --> 00:07:23,850
Então, de volta à visão geral do produto, comentarei isso novamente, mas agora aqui não definimos mais está funcionando como

85
00:07:23,900 --> 00:07:33,110
um valor para o suporte das opções de navegação, mas simplesmente o exportamos como uma constante uma constante que precisamos dar

86
00:07:33,110 --> 00:07:42,360
um nome e eu ' Nomearemos essas opções de tela nenhuma opção de tela mantém essa função e a exportamos pelo

87
00:07:42,360 --> 00:07:43,670
seu nome.

88
00:07:43,850 --> 00:07:49,360
Ele não entra em conflito com a exportação do componente, porque fazemos isso com o padrão aqui.

89
00:07:49,390 --> 00:07:57,340
Portanto, agora exportamos a função de configuração e, em seguida, o navegador da loja, portanto, podemos importá-lo. Além de

90
00:07:57,340 --> 00:08:03,940
importar a tela de visão geral dos produtos desse arquivo, também podemos combinar isso

91
00:08:03,970 --> 00:08:12,940
com uma importação nomeada, onde importamos para a função de opções de tela e, em seguida, aqui duas opções esta tela.

92
00:08:13,020 --> 00:08:17,840
Eu apenas passo um ponteiro para esta função, não a execute, apenas a apontei.

93
00:08:17,910 --> 00:08:24,580
Vamos reagir à navegação executada para você, para que ela possa se encaixar

94
00:08:24,610 --> 00:08:32,780
no valor concreto dessa função de parâmetros de dados NAF uma vez e com essa tela é configurada.

95
00:08:32,890 --> 00:08:36,490
Agora, se salvarmos esse conflito de anúncios, porque temos esse nome em conflito lá embaixo.

96
00:08:36,910 --> 00:08:41,470
Portanto, para resolver isso, verifique se todos apoiamos as outras opções.

97
00:08:41,470 --> 00:08:47,560
Agora, a opção específica do sorteio é algo que analisarei mais tarde, quando adicionamos um sorteio para as opções

98
00:08:47,560 --> 00:08:48,850
de navegação padrão.

99
00:08:48,850 --> 00:08:54,220
A boa notícia é que ainda podemos aplicar aqueles que não precisamos configurar tudo no nível da tela.

100
00:08:54,220 --> 00:08:58,980
Se tivermos uma configuração compartilhada que afeta todas as telas de um navegador.

101
00:08:59,080 --> 00:09:05,320
E como você acha que podemos configurar opções gerais para todas essas telas gratuitas aqui.

102
00:09:05,320 --> 00:09:09,200
Bem, nós os configuramos diretamente no navegador lá.

103
00:09:09,310 --> 00:09:15,520
Também temos uma pequena propriedade de opções de tela, portanto não opções nomeadas, mas opções de tela.

104
00:09:15,610 --> 00:09:21,280
Mas essas são as opções que serão aplicadas a todas as telas aqui e as opções específicas da

105
00:09:21,310 --> 00:09:25,820
tela serão mescladas com essas opções gerais, assim como no início do curso.

106
00:09:25,830 --> 00:09:29,740
Agora, aqui passamos nosso objeto de opções de navegação padrão.

107
00:09:29,850 --> 00:09:36,360
Então, este objeto lá em cima eu apenas alimento isso como um valor para as opções da tela e é isso.

108
00:09:36,360 --> 00:09:41,280
Agora podemos comentar como navegadores de produtos aqui e salvar tudo.

109
00:09:41,360 --> 00:09:48,440
Agora, quando fazemos isso, ainda não conseguimos ver o resultado, porque nesse arquivo do navegador da loja ainda temos muito

110
00:09:48,440 --> 00:09:55,370
código que usa o navegador antigo ou a lógica do navegador antigo e isso está causando um problema aqui.

111
00:09:55,400 --> 00:10:03,090
Agora, para ver ainda um resultado, comentarei temporariamente tudo isso apenas temporariamente e salvarei

112
00:10:03,090 --> 00:10:03,710
novamente.

113
00:10:03,750 --> 00:10:08,660
Para que isso seja reconstruído e você veja que agora temos um erro.

114
00:10:08,720 --> 00:10:14,300
Bem, há uma coisa que realmente precisamos ajustar e o componente de visão geral do produto em nosso cabeçalho

115
00:10:14,300 --> 00:10:16,800
de direção da opção de tela à esquerda.

116
00:10:16,880 --> 00:10:25,060
Isso agora precisa funcionar aqui, que retorna nossa marcação da marca JSA X e o mesmo para o cabeçalho à direita.

117
00:10:25,070 --> 00:10:30,260
Portanto, precisamos converter ambos em funções e você pode simplesmente fazer isso adicionando uma lista de parâmetros vazia e

118
00:10:30,410 --> 00:10:31,580
depois a seta aqui.

119
00:10:31,670 --> 00:10:38,090
Nota lateral, você poderia aceitar o parâmetro aqui, se quisesse, e isso seria adereços, porque agora

120
00:10:38,090 --> 00:10:43,910
é atualmente um componente de reação, encontrando aqui um valor concreto para adereços

121
00:10:43,910 --> 00:10:50,240
será alimentado e pela navegação de reação, e os valores que você pode obter encontrado

122
00:10:50,240 --> 00:10:58,660
nos documentos oficiais com esse ajuste feito, se agora a segurança é reiniciada aqui e agora vemos a tela novamente.

123
00:10:58,660 --> 00:11:01,830
Agora definitivamente pegando nossa configuração.

124
00:11:01,840 --> 00:11:09,360
Lembre-se de que o draw não funcionará porque ainda não adicionamos o draw e a navegação.

125
00:11:09,360 --> 00:11:17,140
Com tudo isso, aprendemos como podemos configurar nossos componentes, nossas telas e o navegador de pilha

126
00:11:17,140 --> 00:11:19,930
geral com essa nova lógica.

127
00:11:19,930 --> 00:11:26,020
É hora de continuar portando Definitivamente, sinta-se à vontade para executar as próximas etapas por conta própria e uma porta

128
00:11:26,020 --> 00:11:32,620
para selecionar opções específicas para os detalhes do produto e a tela do cartão e, a partir de então, passaremos para a próxima

129
00:11:32,620 --> 00:11:33,090
pilha.

130
00:11:33,190 --> 00:11:35,230
E é claro que também processamos o sorteio.