Então, vamos trabalhar para portar toda a nossa lógica aqui no navegador de aplicativos.
Começamos com essa pilha fictícia aqui e isso é legal, mas no final não é o que precisamos.
Agora cabe a você onde você faz essa configuração, mas desde que fizemos isso basicamente no arquivo do navegador
da loja antes.
Eu também continuarei fazendo isso lá.
Mesmo com essa nova lógica.
Então, o que vou fazer é um navegador de aplicativos.
Na verdade, vou me livrar dessa minha pilha aqui e vou me livrar dessa importação e vou me
livrar disso aqui. Vou deixar o contêiner de navegação e redefinir essa importação, mas finalmente vou mudar
isso. um pouco.
Mas agora vamos passar para o navegador da loja, antes de tudo, podemos excluir essa importação da navegação de reação
que não será necessária.
Vamos deixar o resto por enquanto, em vez dessa importação excluída, podemos importar da pilha de navegação de
reação e tudo já é do sorteio e da pilha de anúncios que importamos, criamos o navegador de pilha do slash
draw, importamos, criamos o navegador de desenho.
Agora podemos rolar para baixo e deixar as opções de navegação padrão aqui, na verdade.
Felizmente, o nome soa e como você geralmente configura as coisas e o que você pode configurar realmente
não mudou, exatamente como você aplica a configuração alterada e, portanto, o que definitivamente precisa mudar
é 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,
criarei uma nova constante, que chamarei de navegador de pilha de produtos apenas para que não tenhamos um
conflito de nomes e que é realmente óbvio que isso conterá
uma pilha de páginas e uma pilha de telas e fazemos isso com create navigator de pilha com esta
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
Navigator.
Então agora temos um conflito de nomes, mas isso será removido de qualquer maneira.
E agora esse é um componente de reação do componente funcional e podemos reduzir para todos os
armazenados em um arquivo separado apenas para essa comparação lado a lado e porque tínhamos tudo nesse
arquivo antes de agora configurar todos esses componentes do navegador com nossa navegação A configuração aqui neste único
arquivo que o divide definitivamente é algo que você poderia considerar.
Então, aqui está o nosso navegador de produtos e agora retornarei os produtos stack navigator dot Navigator como
você aprendeu e nos produtos deles empilham a tela de pontos do navegador e nós tínhamos três telas antes, então
replicarei isso duas vezes.
Então, nós tivemos três telas lá.
Agora, podemos configurá-los, vamos atribuir um nome à primeira tela e essa será a visão geral dos produtos.
Agora, o componente que deve ser carregado é o componente da tela de visão geral de nossos produtos.
Então, basicamente, o que mapeamos antes e agora para a segunda tela, o nome é detalhe do produto.
Então, o que tínhamos aqui e certifique-se de manter esses nomes para que toda
a lógica de navegação que você tem no seu aplicativo, porque isso não precise ser alterada, para que isso
ainda funcione e aqui o componente que deve ser carregado quando queremos alcançar essa tela é
o componente de tela detalhada do produto, como fizemos lá embaixo, vamos reformulá-la e, para a última tela, o nome é carrinho.
O que tínhamos aqui e queremos ir para a tela do coração assim.
Então agora configuramos essa pilha de navegação com essa nova lógica baseada em componentes.
Agora podemos importar para o navegador de aplicativos e, para o pai, precisamos
apenas adicionar uma palavra-chave de exportação na frente dele, para que essa constante esse componente seja exportada aqui neste
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
nosso contêiner de navegação agora podemos adicionar o navegador de produtos assim e podemos nos livrar da
importação da tela de visão geral do produto.
Agora, de volta ao navegador da loja.
Vamos dar uma olhada nessas opções.
A seguir, as opções de navegação que tínhamos aqui nesta pilha.
O que fazemos com isso.
Bem, na verdade, temos duas opções aqui no navegador de produtos, no navegador antigo, com a lógica
antiga: ícone da ação.
Essa pilha deve ter na gaveta que adicionaremos mais tarde. A segunda são nossas opções de navegação padrão, que
devem ser aplicadas a todas as telas que fazem parte deste navegador.
E, na verdade, também existe um terceiro lugar em que configuramos as coisas no passado.
E isso foi em algumas das telas.
Vamos dar uma olhada na tela de visão geral do produto, que está na pasta da loja, se rolarmos para baixo.
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
função na qual configuramos coisas como o título do cabeçalho, mas também o que está à
esquerda e o conjunto direito do cabeçalho agora com essa nova lógica.
Você não faz mais isso assim.
Em vez disso, podemos copiar todo esse conjunto aqui.
Então, tudo isso podemos copiá-lo.
Podemos comentar aqui no componente de tela e ir para o componente do navegador de aplicativos.
Com licença para comprar o componente navigator onde configuramos nossa navegação de pilha e agora
na tela em que queremos ter essas opções, podemos adicionar um terceiro suporte e essa é a propriedade de options e duas opções.
Você pode analisar exatamente o que você tinha no componente antes, para que você passe da função é uma função
correta.
Que recebe o parâmetro
de dados NAF, que retorna um objeto de configuração, o valor concreto desse parâmetro será alimentado
pela navegação de reação e os nomes de configuração que podemos definir aqui, o que podemos configurar não
mudou.
Portanto, ainda podemos configurar um título de cabeçalho à frente ou à esquerda.
Então, tudo isso é exatamente o mesmo que você aprendeu.
Funciona exatamente da mesma maneira.
Felizmente agora poderíamos fazer isso aqui e fazer compras no navegador.
Mas é claro que isso rapidamente se tornaria muito grande se tivéssemos todas as diferentes configurações
específicas da tela aqui.
Portanto, não é realmente o que farei aqui.
Em vez disso, vejo duas opções.
Uma é que realmente configuramos a tela do navegador de pilha de produtos no componente de tela.
A segunda é que mantemos nossas opções lá e essa é a abordagem que seguirei.
Então, de volta à visão geral do produto, comentarei isso novamente, mas agora aqui não definimos mais está funcionando como
um valor para o suporte das opções de navegação, mas simplesmente o exportamos como uma constante uma constante que precisamos dar
um nome e eu ' Nomearemos essas opções de tela nenhuma opção de tela mantém essa função e a exportamos pelo
seu nome.
Ele não entra em conflito com a exportação do componente, porque fazemos isso com o padrão aqui.
Portanto, agora exportamos a função de configuração e, em seguida, o navegador da loja, portanto, podemos importá-lo. Além de
importar a tela de visão geral dos produtos desse arquivo, também podemos combinar isso
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.
Eu apenas passo um ponteiro para esta função, não a execute, apenas a apontei.
Vamos reagir à navegação executada para você, para que ela possa se encaixar
no valor concreto dessa função de parâmetros de dados NAF uma vez e com essa tela é configurada.
Agora, se salvarmos esse conflito de anúncios, porque temos esse nome em conflito lá embaixo.
Portanto, para resolver isso, verifique se todos apoiamos as outras opções.
Agora, a opção específica do sorteio é algo que analisarei mais tarde, quando adicionamos um sorteio para as opções
de navegação padrão.
A boa notícia é que ainda podemos aplicar aqueles que não precisamos configurar tudo no nível da tela.
Se tivermos uma configuração compartilhada que afeta todas as telas de um navegador.
E como você acha que podemos configurar opções gerais para todas essas telas gratuitas aqui.
Bem, nós os configuramos diretamente no navegador lá.
Também temos uma pequena propriedade de opções de tela, portanto não opções nomeadas, mas opções de tela.
Mas essas são as opções que serão aplicadas a todas as telas aqui e as opções específicas da
tela serão mescladas com essas opções gerais, assim como no início do curso.
Agora, aqui passamos nosso objeto de opções de navegação padrão.
Então, este objeto lá em cima eu apenas alimento isso como um valor para as opções da tela e é isso.
Agora podemos comentar como navegadores de produtos aqui e salvar tudo.
Agora, quando fazemos isso, ainda não conseguimos ver o resultado, porque nesse arquivo do navegador da loja ainda temos muito
código que usa o navegador antigo ou a lógica do navegador antigo e isso está causando um problema aqui.
Agora, para ver ainda um resultado, comentarei temporariamente tudo isso apenas temporariamente e salvarei
novamente.
Para que isso seja reconstruído e você veja que agora temos um erro.
Bem, há uma coisa que realmente precisamos ajustar e o componente de visão geral do produto em nosso cabeçalho
de direção da opção de tela à esquerda.
Isso agora precisa funcionar aqui, que retorna nossa marcação da marca JSA X e o mesmo para o cabeçalho à direita.
Portanto, precisamos converter ambos em funções e você pode simplesmente fazer isso adicionando uma lista de parâmetros vazia e
depois a seta aqui.
Nota lateral, você poderia aceitar o parâmetro aqui, se quisesse, e isso seria adereços, porque agora
é atualmente um componente de reação, encontrando aqui um valor concreto para adereços
será alimentado e pela navegação de reação, e os valores que você pode obter encontrado
nos documentos oficiais com esse ajuste feito, se agora a segurança é reiniciada aqui e agora vemos a tela novamente.
Agora definitivamente pegando nossa configuração.
Lembre-se de que o draw não funcionará porque ainda não adicionamos o draw e a navegação.
Com tudo isso, aprendemos como podemos configurar nossos componentes, nossas telas e o navegador de pilha
geral com essa nova lógica.
É hora de continuar portando Definitivamente, sinta-se à vontade para executar as próximas etapas por conta própria e uma porta
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
pilha.
E é claro que também processamos o sorteio.