A maioria dos nossos arquivos não precisa ser alterada.
O que precisaremos mudar é o que está acontecendo nos arquivos de navegação e na pasta
de navegação no aplicativo J. S. você pode se lembrar de renderizar o
contêiner de navegação aqui e o contêiner de navegação é apenas um componente personalizado aqui, onde no final temos nossa
lógica para verificar se o usuário está autenticado e, em seguida, renderizamos um Navigator de loja, que é nosso navegador
de rotas criado aqui com navegação de reação e é aí que as coisas precisam mudar agora.
Agora vamos começar com o contêiner de navegação.
Não precisaremos mais desse código aqui, onde navegamos manualmente em outro lugar, se o usuário estiver autenticado, porque você
verá mais tarde que isso agora será tratado de maneira diferente com essa configuração baseada em componente, para que
você possa excluir o uso aqui.
O Keep está desativado aqui, embora você possa excluir a referência aqui e excluir também a que estiver lá e quando
se trata de importações aqui, não precisamos mais de dois ganchos aqui e nem todos precisamos dessa importação.
Então, resta apenas o navegador da loja e isso também não é mais algo que precisamos aqui.
Não estamos adicionando um navegador da loja como um componente como este, em que nos referimos à configuração geral
do arquivo do navegador da loja, porque é claro que essa configuração geral está definida com a lógica
antiga de ter esse registro global como uma configuração que é simplesmente não está mais funcionando com a navegação de
reação 5.
Em vez disso, agora precisamos migrar tudo isso para a nova abordagem para essa abordagem baseada em componentes e
fazer isso.
Eu quero começar bastante simples no contêiner de navegação.
Vou configurar um novo Navegador de pilha, que é apenas um Navegador fictício por enquanto.
Você viu como isso geralmente funciona antes de aplicarmos isso mais
tarde na nossa aplicação real?
Vamos adicionar a importação aqui de em react.
Barra de navegação nativa.
E a partir daí, precisamos importar a navegação para o contêiner de navegação.
Agora isso pode ser confuso porque nosso próprio componente aqui é todo o contêiner de navegação nomeado.
Então, para evitar confusão aqui, vou renomear nosso próprio componente aqui para navegador de aplicativos ou o que você quiser
nomear, então vou renomeá-lo aqui e tudo para evitar confusão, mesmo que não seja tecnicamente
necessário no componente de aplicativo no aplicativo, sim. importado como navegador de aplicativo Vou renomear o arquivo para navegador de
aplicativo e vou importar do navegador de aplicativo aqui no componente do aplicativo, para ajustar o caminho de importação para incluir
esse novo nome de arquivo.
E então aqui eu processo o navegador de aplicativos.
Agora, eu apenas fiz essas alterações de nome para evitar confusão.
A parte mais importante acontece dentro desse aplicativo Navigator, que anteriormente era nosso contêiner de navegação.
Agora estamos importando o contêiner de navegação do React Native.
Mas o pai será um componente diferente do que construímos no passado.
Ele apenas compartilhou o mesmo nome e foi por isso que o renomeei mais importante que esse contêiner de navegação.
Por enquanto, importamos algo da pilha de barras de navegação de reação do anúncio.
E agora é um pacote que não existe e que ainda não instalamos.
Então, vamos parar esse processo novamente.
E com o npm install dash dash safe, vamos instalar na pilha de barras de reação reativa, para que o NPM instale o Ashutosh com
segurança na pilha de barras de navegação reativa.
Isso instalará a lógica de navegação da pilha nos EUA e todos nós já
podemos instalar vários pacotes, porque precisaremos mais tarde e isso será feito com o slash de navegação
de reação, que mais tarde nos dará a navegação baseada em draw, que também será necessária. D para comandos de instalação para
finalizar e, posteriormente, com a inicialização do motor, podemos abrir esse servidor expo novamente, agora instalamos a pilha de Vietnamização.
Podemos importar algo dele e isso é algo como D criar navegador de pilha.
Agora, criar pilha Navigator é uma função que já conhecemos na loja Navigator, que ainda usa a navegação de reação
antiga, na qual também importamos para criar pilha de navegação a partir da navegação de reação ou se você
estava usando este pacote a partir de um pacote separado.
Mas também criamos o navegador de pilha e criamos as extremidades do navegador de desenho.
Agora, usamos o create navigator da pilha para criar nossa configuração, nosso registro de navegação para esta parte de nosso aplicativo. Você pode dizer isso
para a visão geral dos produtos, detalhes do produto e a
tela do cartão que reunimos em uma pilha e, em seguida, tivemos várias pilhas desse
tipo compô-los para reunir em nosso Draw Navigator, que finalmente combinamos com a tela desativada no switch navigator.
Agora, de volta ao nosso navegador de aplicativos, o que fazemos com o criar navegador de pilha aqui.
Agora funciona de maneira diferente.
Agora nós o usamos para criar um novo componente com ele, e eu o chamarei de minha pilha.
O nome é totalmente com você, mas você simplesmente chama cria um navegador de pilha como este e pronto.
E agora é uma grande mudança.
Agora você não passa nenhum objeto para criar um navegador de pilha para configurá-lo.
Em vez disso, é uma função que não deseja um objeto.
É uma função que não precisa de objeto, então o que faz então?
Qual é a minha pilha minha pilha agora é um componente de reação e a usamos como tal aqui no navegador de aplicativos para ser
mais preciso.
Precisamos agrupar toda a lógica de navegação com o componente do contêiner de navegação que estamos importando
da navegação de reação nativa.
Você pode pensar nesse componente do contêiner de navegação basicamente como a versão do componente do contêiner de aplicativos que criamos
com o criar contêiner de aplicativos na configuração antiga.
Ali mesmo, tivemos que envolver nosso navegador finalizado com criar um contêiner de aplicativo.
Agora temos que agrupar nossa configuração de navegação baseada em componentes a ser concluída com o contêiner de navegação.
Portanto, aqui agora configuramos nossa lógica quando se trata de quais páginas queremos carregar.
E aqui agora usamos minha pilha como um componente de reação, mas não assim.
Mas aqui precisamos do componente de navegador DOT.
Então, na verdade, minha pilha é que é um objeto com uma propriedade navigator e os valores
armazenados nessa propriedade agora são um componente.
Portanto, agora podemos criar esse componente e, entre a taxa de abertura e fechamento desse
componente, agora colocamos basicamente as diferentes telas que queremos fazer parte dessa pilha.
Então, o que anteriormente aqui no navegador da loja tinha dentro desse objeto, passamos para criar o navegador da pilha,
esse mapa dos componentes da tela e seus nomes.
É isso que estamos configurando aqui entre essa tag de abertura e fechamento.
Portanto, você pode pensar que o que fazemos é adicionar o componente da tela de visão geral do produto corretamente.
Este é um dos nossos componentes que adicionaríamos uma importação que não fizemos aqui, porque isso
está errado, mas você pode pensar que fazemos isso muito bem.
Essa certamente seria a tela que queremos ter como parte desse navegador, mas não teria
um nome.
Agora precisamos de um nome para que possamos navegar até ele, por exemplo, para que possamos acionar uma navegação em algum
lugar do nosso aplicativo.
É por isso que temos um nome aqui também na configuração antiga.
Então, em vez disso, fazemos algo diferente.
Novamente usamos minha pilha neste objeto lá em cima e agora uma segunda propriedade que possui a propriedade screen, assim
como a propriedade navigator, a propriedade screen também possui um componente de reação e, portanto, podemos
renderizá-lo dessa maneira.
Agora, este é um componente que nos permite definir uma tela que deve fazer parte do navegador de
pilha aqui e a configuramos com a ajuda de adereços agora, porque estamos trabalhando com um componente aqui, para que a configuração
funcione com adereços, como sempre é o caso. caso, quando trabalhamos com componentes para dar um nome a essa
tela, adicionamos um nome prop e agora podemos usar esse nome, usamos aqui a visão geral dos produtos, para que possamos adicionar
esse nome e permitir que a navegação reativa saiba qual componente carregar quando segmentarmos esse nome quando fazemos
isso com uma ação de imigração, por exemplo, adicionamos um segundo suporte ao componente prop e isso deve conter um
ponteiro no componente que queremos carregar quando queremos ir para esta tela com esse nome.
Então, para isso, vou importar a tela de visão geral dos produtos aqui da pasta de telas para a subpasta de compras e depois a tela de
visão geral de produtos.
Então agora precisamos disso e eu passei está aqui.
Agora importante, não criamos o componente aqui.
Apenas apontamos para isso, apenas usamos o nome que é exportado desse arquivo.
E com isso, agora temos nossa primeira pequena pilha configurada aqui.
Agora vamos comentar essa importação do navegador da loja.
Não precisamos mais disso no momento.
Vamos salvar tudo e lançou o dele no Android, digamos.
E quando você faz isso, ele cria o pacote javascript e abre no dispositivo Android.
E o que você verá é a tela de visão geral de nossos produtos.
Claro que parece um pouco diferente.
Claro que está faltando os botões do cabeçalho.
Está faltando toda a configuração do cabeçalho.
O título está errado, mas isso faz sentido, porque agora não estamos usando o navegador antigo,
onde tínhamos toda essa configuração, mas o novo e isso é apenas uma prova de que funciona e como funciona.
Agora, com esse conhecimento em mente, vamos deixar esse pequeno exemplo aqui e, na verdade, vamos portar toda a nossa navegação
configurada aqui para essa nova lógica.