1 00:00:02,170 --> 00:00:04,210 Então, trabalhamos com o navegador de pilha. 2 00:00:04,210 --> 00:00:06,080 Agora, e o sorteio? 3 00:00:06,100 --> 00:00:08,950 A lógica é exatamente a mesma. 4 00:00:08,950 --> 00:00:18,780 Criamos o ano do navegador de desenho da loja chamando create navigator de desenho e, assim como o navegador de pilha. 5 00:00:18,780 --> 00:00:21,470 Esta função não quer argumento. 6 00:00:21,480 --> 00:00:28,980 Em vez disso, configuraremos nossa navegação de desenho em uma abordagem baseada em componentes ou, pai, criaremos um navegador de loja aqui 7 00:00:28,980 --> 00:00:31,500 e este será um componente de reação. 8 00:00:31,500 --> 00:00:33,850 Novamente, você pode ter isso em um arquivo separado. 9 00:00:33,870 --> 00:00:42,210 Vou manter tudo em um arquivo para tê-lo lado a lado com o código antigo e, na loja deles, retornamos shop 10 00:00:42,210 --> 00:00:44,160 draw navigator dot navigator. 11 00:00:44,160 --> 00:00:48,170 A mesma lógica de antes Não importa se é um empate. 12 00:00:48,210 --> 00:00:53,460 E agora temos duas telas diferentes que podem ser carregadas com o navegador e 13 00:00:53,460 --> 00:00:59,880 a navegação com reação garantirá automaticamente que um navegador seja criado e que possamos abri-lo com o 14 00:00:59,880 --> 00:01:03,360 mesmo código que usamos antes, sem precisar ajustá-lo. 15 00:01:03,360 --> 00:01:10,920 Portanto, agora temos nossa loja para desenhar a tela de pontos do navegador e a justiça antes de dar um nome a essa tela. 16 00:01:10,920 --> 00:01:13,190 Aqui temos dois produtos, por exemplo. 17 00:01:13,440 --> 00:01:17,580 E esse nome será automaticamente usado dentro do navegador de desenho. 18 00:01:17,580 --> 00:01:24,110 Embora você também possa sobrescrever tudo isso, se quiser, e precisamos de um componente carregado quando 19 00:01:24,110 --> 00:01:26,450 clicamos nesse link no navegador. 20 00:01:26,450 --> 00:01:29,270 E aqui ainda é o Navegador do produto. 21 00:01:29,330 --> 00:01:36,660 Assim como antes, podemos usar nossos navegadores de pilha, embora agora eles estejam usando essa abordagem baseada em 22 00:01:36,660 --> 00:01:43,770 componentes como componentes que devem ser criados como parte de outro navegador nesse caso, como parte do navegador 23 00:01:43,770 --> 00:01:44,920 de desenho. 24 00:01:44,940 --> 00:01:51,380 Ainda podemos apontar nossos navegadores de pilha como componentes aqui porque são componentes este ano. 25 00:01:51,390 --> 00:01:55,710 Este é um componente e o mesmo é válido para todos os nossos navegadores. 26 00:01:55,710 --> 00:02:02,130 Criamos aqui todos os componentes de reação que mantêm sua lógica de navegação específica, os componentes solicitados e 27 00:02:03,130 --> 00:02:09,670 os componentes gerais, como o navegador de produtos aqui, podem ser usados em um navegador de desenho. Por 28 00:02:09,670 --> 00:02:18,940 isso, replicarei isso duas vezes para que também possamos adicionar nossos pedidos aqui com o navegador de pedidos e o administrador aqui com o navegador de 29 00:02:19,450 --> 00:02:25,870 administradores e verifique se não há erros em seus nomes, porque os estamos usando em todo o aplicativo 30 00:02:25,870 --> 00:02:28,820 e essa lógica não precisará ser ajustada. 31 00:02:28,840 --> 00:02:34,080 Portanto, se você estragar os nomes aqui, outras partes do aplicativo não funcionarão bem. 32 00:02:34,120 --> 00:02:39,710 Então agora nós configuramos esse navegador de desenho e agora sobre a configuração. 33 00:02:39,730 --> 00:02:42,030 Agora, há duas coisas que precisamos considerar. 34 00:02:42,100 --> 00:02:46,560 Por um lado, temos que configurar aqui o conteúdo do sorteio. 35 00:02:46,570 --> 00:02:52,660 Segundo, queremos configurar nossas telas diferentes, como o navegador do produto ou o navegador do pedido, 36 00:02:52,750 --> 00:02:55,510 para ter seus próprios ícones na gaveta. 37 00:02:55,510 --> 00:02:57,100 Bem, vamos começar com os ícones. 38 00:02:57,160 --> 00:03:02,230 Anteriormente, configuramos que eu posso diretamente na configuração do Stack Navigator que desejávamos 39 00:03:02,230 --> 00:03:06,930 usar em um sorteio agora com a abordagem baseada em componentes. 40 00:03:06,930 --> 00:03:08,420 Nós não fazemos mais isso. 41 00:03:08,430 --> 00:03:17,450 Em vez disso, podemos apenas pegar essa parte aqui, na verdade, somos todo esse objeto que configuramos anteriormente no navegador 42 00:03:17,450 --> 00:03:21,440 de pilha e descemos para o nosso sorteio. 43 00:03:21,510 --> 00:03:23,870 E agora aqui nesta tela a que pertence. 44 00:03:23,870 --> 00:03:26,180 Portanto, neste caso, ele pertence ao administrador Navigator. 45 00:03:26,180 --> 00:03:34,630 Então, aqui na tela do administrador, passamos nossas opções novamente, assim como fizemos um segundo, e vou para a pilha Navigator. 46 00:03:34,790 --> 00:03:42,230 Então aqui passamos agora as opções para essa tela e este pode ser um componente normal ou, como neste caso, 47 00:03:42,230 --> 00:03:48,760 um componente com nossa lógica de navegação de pilha e duas opções, passamos um objeto e lá podemos 48 00:03:48,770 --> 00:03:51,170 reutilizar o objeto que usamos anteriormente. 49 00:03:51,200 --> 00:03:56,060 Assim, um objeto com um empate eu posso definir onde estamos de olho nele e assim por diante. 50 00:03:56,060 --> 00:04:04,140 Portanto, tudo isso funciona justamente antes de um pequeno ajuste, mas agora temos adereços aqui também alimentados 51 00:04:04,140 --> 00:04:12,660 pela navegação de reação e esses adereços terão uma chave de cor em vez de desenhar configuração. As 52 00:04:12,800 --> 00:04:18,470 cenas controlarão onde isso é feito na tela ativa no 53 00:04:18,480 --> 00:04:24,200 momento ou não e ajustará os valores armazenados nessa base de cores. 54 00:04:24,240 --> 00:04:26,920 Eu já destaquei as cores realçadas já conhecidas. 55 00:04:27,000 --> 00:04:33,250 Portanto, é um pequeno ajuste que temos que fazer aqui e, com isso, podemos copiar a lógica 56 00:04:33,250 --> 00:04:39,250 dos outros navegadores e também do navegador da ordem, vamos pegar esse objeto aqui 57 00:04:39,250 --> 00:04:48,100 que tínhamos e suas opções de navegação vão até o empate nas ordens tela adicione as opções passe a chave e é objeto e 58 00:04:48,100 --> 00:04:57,170 comente que está de volta e importante agora temos adereços que terão essa chave de cor exatamente como esta e por último mas não 59 00:04:57,380 --> 00:05:03,470 menos importante, é claro que também faremos isso na tela de produtos do navegador de produtos. 60 00:05:03,470 --> 00:05:09,200 Aqui temos esse objeto, vamos buscá-lo, vamos ao nosso navegador 61 00:05:12,050 --> 00:05:18,440 e aqui está a tela do produto, configure as teclas de opções aqui. 62 00:05:18,570 --> 00:05:23,520 Passei e ajustei como acabei de mostrar. 63 00:05:23,520 --> 00:05:27,840 Então agora temos nossa configuração específica de tela aqui. 64 00:05:27,840 --> 00:05:35,700 Você pode dizer agora o que acontece com o sorteio em geral, porque anteriormente no aplicativo com 65 00:05:35,740 --> 00:05:45,450 a antiga navegação de reação, na qual realizamos nosso sorteio e configuramos a cor da tonalidade ativa e também o conteúdo 66 00:05:45,450 --> 00:05:46,640 do sorteio. 67 00:05:46,680 --> 00:05:50,160 Bem, você ainda pode fazer isso com essa nova abordagem. 68 00:05:50,340 --> 00:05:58,640 Vamos ao nosso navegador de desenho, onde configuramos o navegador geral e o configuramos por meio de adereços, como 69 00:05:58,640 --> 00:05:59,310 antes. 70 00:05:59,340 --> 00:06:06,030 É tudo sobre componentes e acessórios. Por isso, agora, porém, temos uma nomeação diferente, 71 00:06:06,030 --> 00:06:09,960 não temos mais opções e componentes de conteúdo. 72 00:06:10,020 --> 00:06:11,910 E você pode encontrar isso nos documentos oficiais. 73 00:06:11,970 --> 00:06:17,190 Agora temos conteúdo de desenho e opções de conteúdo de desenho. 74 00:06:17,190 --> 00:06:20,540 No entanto, os valores são exatamente os mesmos no final. 75 00:06:20,700 --> 00:06:24,750 Assim, podemos pegar nosso objeto de opções de conteúdo 76 00:06:28,600 --> 00:06:37,820 aqui e no passado, para desenhar opções de conteúdo aqui e comentar isso para frente e para trás para desenhar um conteúdo. 77 00:06:37,900 --> 00:06:40,180 Também é quase o mesmo. 78 00:06:40,180 --> 00:06:42,760 Nós apenas envolvemos esse componente 79 00:06:51,270 --> 00:06:52,880 aqui até aqui. 80 00:06:53,010 --> 00:06:53,970 Copie 81 00:06:57,260 --> 00:07:03,070 isso e passe-o aqui para o conteúdo do desenho e comente-o. 82 00:07:03,080 --> 00:07:07,400 No entanto, agora duas coisas importantes usam esse patch não é permitido aqui. 83 00:07:07,400 --> 00:07:09,490 Você deve fazer isso fora daqui. 84 00:07:09,500 --> 00:07:15,980 Assim, por exemplo, aqui no navegador da loja, o cabeçalho é aninhado. 85 00:07:15,980 --> 00:07:27,910 Além disso, não é mais o item de desenho, mas a lista de itens de desenho que também precisamos importar na parte superior do 86 00:07:32,940 --> 00:07:35,730 desenho da barra de reativação. 87 00:07:35,730 --> 00:07:37,890 Então aqui importamos a lista de itens de desenho com 88 00:07:40,580 --> 00:07:41,030 ele. 89 00:07:41,030 --> 00:07:49,630 No entanto, se eu rolar para baixo, isso agora deve estar funcionando novamente e esse deve ser o nosso empate de trabalho. 90 00:07:49,630 --> 00:07:56,830 Portanto, temos o navegador da loja, temos todos esses navegadores de pilha, o que resta agora é a 91 00:07:56,830 --> 00:08:05,440 troca do navegador, que basicamente processa nossa tela de inicialização ou você tela ou a tela da loja ou faça suas respectivas 92 00:08:05,440 --> 00:08:07,450 pilhas de navegação, devo dizer. 93 00:08:07,750 --> 00:08:09,940 Bem, é nisso que trabalharemos a seguir.