1 00:00:02,410 --> 00:00:05,910 A maioria dos nossos arquivos não precisa ser alterada. 2 00:00:06,040 --> 00:00:12,220 O que precisaremos mudar é o que está acontecendo nos arquivos de navegação e na pasta 3 00:00:13,000 --> 00:00:19,540 de navegação no aplicativo J. S. você pode se lembrar de renderizar o 4 00:00:19,570 --> 00:00:25,510 contêiner de navegação aqui e o contêiner de navegação é apenas um componente personalizado aqui, onde no final temos nossa 5 00:00:25,580 --> 00:00:31,330 lógica para verificar se o usuário está autenticado e, em seguida, renderizamos um Navigator de loja, que é nosso navegador 6 00:00:31,330 --> 00:00:36,550 de rotas criado aqui com navegação de reação e é aí que as coisas precisam mudar agora. 7 00:00:36,550 --> 00:00:39,410 Agora vamos começar com o contêiner de navegação. 8 00:00:39,430 --> 00:00:45,640 Não precisaremos mais desse código aqui, onde navegamos manualmente em outro lugar, se o usuário estiver autenticado, porque você 9 00:00:46,150 --> 00:00:52,090 verá mais tarde que isso agora será tratado de maneira diferente com essa configuração baseada em componente, para que 10 00:00:52,780 --> 00:00:55,040 você possa excluir o uso aqui. 11 00:00:55,150 --> 00:01:02,920 O Keep está desativado aqui, embora você possa excluir a referência aqui e excluir também a que estiver lá e quando 12 00:01:02,920 --> 00:01:09,620 se trata de importações aqui, não precisamos mais de dois ganchos aqui e nem todos precisamos dessa importação. 13 00:01:09,760 --> 00:01:17,020 Então, resta apenas o navegador da loja e isso também não é mais algo que precisamos aqui. 14 00:01:17,110 --> 00:01:24,040 Não estamos adicionando um navegador da loja como um componente como este, em que nos referimos à configuração geral 15 00:01:24,040 --> 00:01:30,760 do arquivo do navegador da loja, porque é claro que essa configuração geral está definida com a lógica 16 00:01:30,760 --> 00:01:38,080 antiga de ter esse registro global como uma configuração que é simplesmente não está mais funcionando com a navegação de 17 00:01:38,080 --> 00:01:39,140 reação 5. 18 00:01:39,790 --> 00:01:46,990 Em vez disso, agora precisamos migrar tudo isso para a nova abordagem para essa abordagem baseada em componentes e 19 00:01:46,990 --> 00:01:47,950 fazer isso. 20 00:01:48,130 --> 00:01:51,980 Eu quero começar bastante simples no contêiner de navegação. 21 00:01:52,090 --> 00:01:57,970 Vou configurar um novo Navegador de pilha, que é apenas um Navegador fictício por enquanto. 22 00:01:57,970 --> 00:02:04,240 Você viu como isso geralmente funciona antes de aplicarmos isso mais 23 00:02:04,240 --> 00:02:07,270 tarde na nossa aplicação real? 24 00:02:07,410 --> 00:02:10,000 Vamos adicionar a importação aqui de em react. 25 00:02:10,020 --> 00:02:13,020 Barra de navegação nativa. 26 00:02:13,020 --> 00:02:19,070 E a partir daí, precisamos importar a navegação para o contêiner de navegação. 27 00:02:19,080 --> 00:02:24,460 Agora isso pode ser confuso porque nosso próprio componente aqui é todo o contêiner de navegação nomeado. 28 00:02:24,600 --> 00:02:31,890 Então, para evitar confusão aqui, vou renomear nosso próprio componente aqui para navegador de aplicativos ou o que você quiser 29 00:02:31,890 --> 00:02:37,260 nomear, então vou renomeá-lo aqui e tudo para evitar confusão, mesmo que não seja tecnicamente 30 00:02:37,920 --> 00:02:45,330 necessário no componente de aplicativo no aplicativo, sim. importado como navegador de aplicativo Vou renomear o arquivo para navegador de 31 00:02:45,420 --> 00:02:53,220 aplicativo e vou importar do navegador de aplicativo aqui no componente do aplicativo, para ajustar o caminho de importação para incluir 32 00:02:53,460 --> 00:02:55,680 esse novo nome de arquivo. 33 00:02:55,680 --> 00:02:59,030 E então aqui eu processo o navegador de aplicativos. 34 00:02:59,070 --> 00:03:02,430 Agora, eu apenas fiz essas alterações de nome para evitar confusão. 35 00:03:02,490 --> 00:03:09,300 A parte mais importante acontece dentro desse aplicativo Navigator, que anteriormente era nosso contêiner de navegação. 36 00:03:09,300 --> 00:03:12,120 Agora estamos importando o contêiner de navegação do React Native. 37 00:03:12,120 --> 00:03:15,450 Mas o pai será um componente diferente do que construímos no passado. 38 00:03:15,480 --> 00:03:21,690 Ele apenas compartilhou o mesmo nome e foi por isso que o renomeei mais importante que esse contêiner de navegação. 39 00:03:21,690 --> 00:03:26,910 Por enquanto, importamos algo da pilha de barras de navegação de reação do anúncio. 40 00:03:27,120 --> 00:03:31,500 E agora é um pacote que não existe e que ainda não instalamos. 41 00:03:32,280 --> 00:03:34,440 Então, vamos parar esse processo novamente. 42 00:03:34,500 --> 00:03:43,020 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 43 00:03:43,020 --> 00:03:46,010 segurança na pilha de barras de navegação reativa. 44 00:03:46,170 --> 00:03:51,840 Isso instalará a lógica de navegação da pilha nos EUA e todos nós já 45 00:03:51,840 --> 00:03:58,380 podemos instalar vários pacotes, porque precisaremos mais tarde e isso será feito com o slash de navegação 46 00:03:58,380 --> 00:04:06,760 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 47 00:04:06,930 --> 00:04:14,190 finalizar e, posteriormente, com a inicialização do motor, podemos abrir esse servidor expo novamente, agora instalamos a pilha de Vietnamização. 48 00:04:14,190 --> 00:04:19,500 Podemos importar algo dele e isso é algo como D criar navegador de pilha. 49 00:04:19,650 --> 00:04:26,490 Agora, criar pilha Navigator é uma função que já conhecemos na loja Navigator, que ainda usa a navegação de reação 50 00:04:26,490 --> 00:04:33,210 antiga, na qual também importamos para criar pilha de navegação a partir da navegação de reação ou se você 51 00:04:33,210 --> 00:04:36,990 estava usando este pacote a partir de um pacote separado. 52 00:04:37,200 --> 00:04:43,770 Mas também criamos o navegador de pilha e criamos as extremidades do navegador de desenho. 53 00:04:43,880 --> 00:04:53,870 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 54 00:04:53,990 --> 00:04:58,760 para a visão geral dos produtos, detalhes do produto e a 55 00:04:58,760 --> 00:05:05,000 tela do cartão que reunimos em uma pilha e, em seguida, tivemos várias pilhas desse 56 00:05:05,000 --> 00:05:12,070 tipo compô-los para reunir em nosso Draw Navigator, que finalmente combinamos com a tela desativada no switch navigator. 57 00:05:12,090 --> 00:05:16,710 Agora, de volta ao nosso navegador de aplicativos, o que fazemos com o criar navegador de pilha aqui. 58 00:05:16,740 --> 00:05:18,560 Agora funciona de maneira diferente. 59 00:05:18,870 --> 00:05:25,260 Agora nós o usamos para criar um novo componente com ele, e eu o chamarei de minha pilha. 60 00:05:25,260 --> 00:05:31,440 O nome é totalmente com você, mas você simplesmente chama cria um navegador de pilha como este e pronto. 61 00:05:31,440 --> 00:05:33,810 E agora é uma grande mudança. 62 00:05:33,960 --> 00:05:39,120 Agora você não passa nenhum objeto para criar um navegador de pilha para configurá-lo. 63 00:05:39,170 --> 00:05:42,900 Em vez disso, é uma função que não deseja um objeto. 64 00:05:42,900 --> 00:05:48,490 É uma função que não precisa de objeto, então o que faz então? 65 00:05:48,490 --> 00:05:57,720 Qual é a minha pilha minha pilha agora é um componente de reação e a usamos como tal aqui no navegador de aplicativos para ser 66 00:05:57,720 --> 00:05:58,490 mais preciso. 67 00:05:58,500 --> 00:06:04,890 Precisamos agrupar toda a lógica de navegação com o componente do contêiner de navegação que estamos importando 68 00:06:04,890 --> 00:06:06,800 da navegação de reação nativa. 69 00:06:06,870 --> 00:06:14,730 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 70 00:06:15,270 --> 00:06:19,080 com o criar contêiner de aplicativos na configuração antiga. 71 00:06:19,080 --> 00:06:24,830 Ali mesmo, tivemos que envolver nosso navegador finalizado com criar um contêiner de aplicativo. 72 00:06:24,840 --> 00:06:31,680 Agora temos que agrupar nossa configuração de navegação baseada em componentes a ser concluída com o contêiner de navegação. 73 00:06:32,310 --> 00:06:39,800 Portanto, aqui agora configuramos nossa lógica quando se trata de quais páginas queremos carregar. 74 00:06:39,870 --> 00:06:45,640 E aqui agora usamos minha pilha como um componente de reação, mas não assim. 75 00:06:45,690 --> 00:06:50,050 Mas aqui precisamos do componente de navegador DOT. 76 00:06:50,130 --> 00:06:58,620 Então, na verdade, minha pilha é que é um objeto com uma propriedade navigator e os valores 77 00:06:58,620 --> 00:07:02,520 armazenados nessa propriedade agora são um componente. 78 00:07:02,530 --> 00:07:08,110 Portanto, agora podemos criar esse componente e, entre a taxa de abertura e fechamento desse 79 00:07:08,110 --> 00:07:13,550 componente, agora colocamos basicamente as diferentes telas que queremos fazer parte dessa pilha. 80 00:07:13,570 --> 00:07:20,800 Então, o que anteriormente aqui no navegador da loja tinha dentro desse objeto, passamos para criar o navegador da pilha, 81 00:07:21,070 --> 00:07:24,790 esse mapa dos componentes da tela e seus nomes. 82 00:07:24,850 --> 00:07:30,140 É isso que estamos configurando aqui entre essa tag de abertura e fechamento. 83 00:07:30,190 --> 00:07:36,900 Portanto, você pode pensar que o que fazemos é adicionar o componente da tela de visão geral do produto corretamente. 84 00:07:36,910 --> 00:07:41,680 Este é um dos nossos componentes que adicionaríamos uma importação que não fizemos aqui, porque isso 85 00:07:41,980 --> 00:07:45,440 está errado, mas você pode pensar que fazemos isso muito bem. 86 00:07:45,790 --> 00:07:51,430 Essa certamente seria a tela que queremos ter como parte desse navegador, mas não teria 87 00:07:51,430 --> 00:07:52,410 um nome. 88 00:07:52,450 --> 00:07:58,210 Agora precisamos de um nome para que possamos navegar até ele, por exemplo, para que possamos acionar uma navegação em algum 89 00:07:58,210 --> 00:07:59,350 lugar do nosso aplicativo. 90 00:07:59,350 --> 00:08:03,570 É por isso que temos um nome aqui também na configuração antiga. 91 00:08:03,700 --> 00:08:05,530 Então, em vez disso, fazemos algo diferente. 92 00:08:05,530 --> 00:08:13,090 Novamente usamos minha pilha neste objeto lá em cima e agora uma segunda propriedade que possui a propriedade screen, assim 93 00:08:13,570 --> 00:08:19,930 como a propriedade navigator, a propriedade screen também possui um componente de reação e, portanto, podemos 94 00:08:19,930 --> 00:08:21,160 renderizá-lo dessa maneira. 95 00:08:21,160 --> 00:08:27,820 Agora, este é um componente que nos permite definir uma tela que deve fazer parte do navegador de 96 00:08:27,820 --> 00:08:35,620 pilha aqui e a configuramos com a ajuda de adereços agora, porque estamos trabalhando com um componente aqui, para que a configuração 97 00:08:35,620 --> 00:08:42,430 funcione com adereços, como sempre é o caso. caso, quando trabalhamos com componentes para dar um nome a essa 98 00:08:42,460 --> 00:08:50,350 tela, adicionamos um nome prop e agora podemos usar esse nome, usamos aqui a visão geral dos produtos, para que possamos adicionar 99 00:08:50,860 --> 00:08:57,370 esse nome e permitir que a navegação reativa saiba qual componente carregar quando segmentarmos esse nome quando fazemos 100 00:08:57,370 --> 00:09:04,690 isso com uma ação de imigração, por exemplo, adicionamos um segundo suporte ao componente prop e isso deve conter um 101 00:09:05,050 --> 00:09:10,770 ponteiro no componente que queremos carregar quando queremos ir para esta tela com esse nome. 102 00:09:10,900 --> 00:09:22,080 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 103 00:09:22,080 --> 00:09:23,750 visão geral de produtos. 104 00:09:23,940 --> 00:09:27,910 Então agora precisamos disso e eu passei está aqui. 105 00:09:28,020 --> 00:09:30,780 Agora importante, não criamos o componente aqui. 106 00:09:30,810 --> 00:09:36,960 Apenas apontamos para isso, apenas usamos o nome que é exportado desse arquivo. 107 00:09:36,960 --> 00:09:42,750 E com isso, agora temos nossa primeira pequena pilha configurada aqui. 108 00:09:42,780 --> 00:09:46,240 Agora vamos comentar essa importação do navegador da loja. 109 00:09:46,260 --> 00:09:48,360 Não precisamos mais disso no momento. 110 00:09:48,360 --> 00:09:52,670 Vamos salvar tudo e lançou o dele no Android, digamos. 111 00:09:52,830 --> 00:09:58,250 E quando você faz isso, ele cria o pacote javascript e abre no dispositivo Android. 112 00:09:58,260 --> 00:10:01,470 E o que você verá é a tela de visão geral de nossos produtos. 113 00:10:01,470 --> 00:10:02,790 Claro que parece um pouco diferente. 114 00:10:02,790 --> 00:10:04,770 Claro que está faltando os botões do cabeçalho. 115 00:10:04,800 --> 00:10:07,330 Está faltando toda a configuração do cabeçalho. 116 00:10:07,350 --> 00:10:13,740 O título está errado, mas isso faz sentido, porque agora não estamos usando o navegador antigo, 117 00:10:13,740 --> 00:10:21,500 onde tínhamos toda essa configuração, mas o novo e isso é apenas uma prova de que funciona e como funciona. 118 00:10:21,600 --> 00:10:30,240 Agora, com esse conhecimento em mente, vamos deixar esse pequeno exemplo aqui e, na verdade, vamos portar toda a nossa navegação 119 00:10:30,240 --> 00:10:32,910 configurada aqui para essa nova lógica.