1 00:00:02,350 --> 00:00:05,320 Com isso, adicionamos guias e, sim, nos favoritos, 2 00:00:05,330 --> 00:00:06,970 ainda não estamos fazendo 3 00:00:06,970 --> 00:00:08,370 nada, isso é 4 00:00:08,380 --> 00:00:14,070 algo que seguiremos, mas temos pelo menos guias. Antes de trabalharmos nos favoritos, vamos 5 00:00:14,070 --> 00:00:19,620 trabalhar um pouco mais nas guias, porque agora, temos guias no Android que não 6 00:00:19,620 --> 00:00:25,080 parecem realmente esperadas, mas parecem mais guias do iOS, se você me perguntar . 7 00:00:25,080 --> 00:00:27,840 Claro que funciona e você pode manter isso, se esse 8 00:00:27,840 --> 00:00:33,090 for o estilo que você deseja, nada de errado com isso, mas seria melhor ter uma aparência mais específica 9 00:00:33,090 --> 00:00:39,300 do Android e, para isso, temos um navegador separado que podemos criar, embora tenhamos que instalar um pacote extra para isso antes de 10 00:00:39,390 --> 00:00:41,180 tudo, então vamos fazer isso. 11 00:00:41,860 --> 00:00:45,660 Deixe-me sair desse servidor aqui e executar o npm 12 00:00:45,660 --> 00:00:53,490 install --save e agora isso é abas react-navigation-material-bottom-tab, pelo jeito que também há react-navigation-material-top-tabs, não vou mergulhar nisso 13 00:00:53,490 --> 00:00:58,920 Neste curso aqui, mas anexado, você também encontrará um link onde poderá aprender 14 00:00:59,130 --> 00:01:04,170 mais sobre esse navegador alternativo. Usaremos o navegador das guias 15 00:01:04,170 --> 00:01:09,130 inferiores do material aqui e instalaremos este pacote; é assim que começamos. 16 00:01:09,150 --> 00:01:13,800 Então, vamos esperar que a instalação termine e, posteriormente, vamos instalar um 17 00:01:13,890 --> 00:01:25,240 outro pacote que também será necessário com o npm install --save, e isso é react-native-paper. Então, vamos instalar isso também e, uma vez concluída a instalação, reiniciaremos o 18 00:01:25,240 --> 00:01:26,680 servidor expo 19 00:01:26,680 --> 00:01:28,720 com o npm start 20 00:01:28,810 --> 00:01:32,400 novamente, porque agora instalamos pacotes que nos ajudam 21 00:01:32,560 --> 00:01:37,940 a renderizar um navegador de guias alternativo e, felizmente, é muito fácil 22 00:01:37,970 --> 00:01:43,780 de usar e tem praticamente o mesmo ou muito opções de configuração semelhantes 23 00:01:43,780 --> 00:01:48,730 às do navegador da guia inferior, especialmente quando se trata de 24 00:01:48,730 --> 00:01:54,730 como configuramos ícones e assim por diante. Em anexo, você encontra todos os 25 00:01:55,000 --> 00:01:56,160 documentos para 26 00:01:56,290 --> 00:02:05,080 esse navegador alternativo e para esse outro navegador alternativo que eu mencionei e vamos usá-lo importando deste pacote de 27 00:02:05,080 --> 00:02:12,770 navegador react-navigation-material-bottom-tabs recém-instalado aqui e de lá, podemos importar o create função de navegação da guia inferior 28 00:02:12,830 --> 00:02:14,310 do material aqui. 29 00:02:14,450 --> 00:02:18,950 Agora, verifique se você também tem importações de plataforma, porque agora precisaremos disso, porque 30 00:02:18,950 --> 00:02:21,980 eu só quero usar esse navegador em vez do 31 00:02:21,980 --> 00:02:31,070 navegador criar aba inferior se estiver no Android. Então, aqui podemos verificar se a plataforma. os é igual ao Android e, nesse caso, 32 00:02:31,070 --> 00:02:36,830 quero usar essa nova função de navegação de guia inferior do material de criação que 33 00:02:36,830 --> 00:02:37,680 acabei de 34 00:02:37,740 --> 00:02:44,060 importar; caso contrário, após os dois pontos, usaremos o navegador de guia inferior que configuramos na palestra anterior. 35 00:02:44,060 --> 00:02:50,880 Portanto, é claro que isso nos deixa com uma pergunta: como o navegador da guia inferior do material funciona? Como configuramos isso? 36 00:02:50,990 --> 00:02:56,750 E a boa notícia aqui é que geralmente funciona da mesma forma que o navegador da guia inferior. 37 00:02:56,750 --> 00:03:01,100 Há alguns detalhes que você pode configurar no próprio navegador de 38 00:03:01,100 --> 00:03:05,670 guias, por exemplo, qual cor assumir, quando e assim por diante, que 39 00:03:05,690 --> 00:03:12,210 difere, mas com relação a como você configura suas guias e combina telas e ícones, é exatamente 40 00:03:12,350 --> 00:03:18,650 o mesmo e, portanto, nós pode pegar essa configuração de tela inteira aqui, cortá-la daqui e armazená-la 41 00:03:18,650 --> 00:03:24,350 em uma constante separada, aqui denominada tabScreenConfig, você pode nomear o que quiser, porque isso 42 00:03:24,350 --> 00:03:25,990 pode ser reutilizado 43 00:03:26,240 --> 00:03:33,070 e agora usar a tabScreenConfig como primeiro argumento no navegador da guia inferior, bem como no navegador da 44 00:03:33,080 --> 00:03:40,010 guia inferior do material, assim e isso nos deixa apenas com um segundo argumento alternativo, que passamos ao 45 00:03:40,160 --> 00:03:45,290 navegador da guia inferior do material e apenas ao navegador da guia inferior. 46 00:03:45,290 --> 00:03:51,330 Esse segundo argumento que passamos, esse objeto que passamos como um segundo argumento, como você aprendeu, nos permite configurar 47 00:03:51,330 --> 00:03:56,730 o próprio navegador de guias, por exemplo, configurar opções da barra de guias como a cor 48 00:03:56,990 --> 00:04:05,480 da tonalidade ativa e que difere um pouco porque no navegador de guias inferior do material , não configuramos opções da barra de guias para configurar 49 00:04:05,480 --> 00:04:07,950 nossa cor de tonalidade ativa. Em vez 50 00:04:07,970 --> 00:04:14,530 disso, temos diretamente uma cor de tonalidade ativa aqui neste próprio objeto, no navegador da guia inferior, tivemos isso em um 51 00:04:14,570 --> 00:04:17,330 objeto aninhado, nas opções da barra de guias , 52 00:04:17,330 --> 00:04:18,950 não temos isso aqui. 53 00:04:18,950 --> 00:04:24,590 Em vez disso, aqui, apenas definimos a cor da tonalidade ativa assim para as cores de destaque e também 54 00:04:24,590 --> 00:04:29,660 existem outras configurações. Por exemplo, você pode definir a mudança para true e mostrarei o que 55 00:04:29,660 --> 00:04:30,800 isso faz e 56 00:04:30,890 --> 00:04:39,550 o que false faz em um segundo e com isso, é isso por agora. Se agora salvarmos isso, isso reconstruirá nosso projeto e o recarregará na tela 57 00:04:39,550 --> 00:04:42,980 e teremos as mesmas guias de antes no iOS, que 58 00:04:42,980 --> 00:04:43,550 não 59 00:04:43,550 --> 00:04:45,140 foram alteradas, mas no 60 00:04:45,140 --> 00:04:48,440 Android, agora temos aquele navegador de guias com aparência 61 00:04:48,500 --> 00:04:53,200 mais material, onde podemos agora também mude assim e esse é o efeito de 62 00:04:53,240 --> 00:04:59,270 mudança que você vê aqui, que as guias crescem, que o rótulo existe apenas na guia que está 63 00:04:59,270 --> 00:05:00,740 ativa e, se você 64 00:05:00,860 --> 00:05:05,990 definir a mudança para false aqui, a propósito, você simplesmente não tem isso efeito, você 65 00:05:05,990 --> 00:05:08,390 sempre terá seus rótulos no Android também. 66 00:05:08,390 --> 00:05:12,490 Agora, esse é um visual que parece um pouco mais com 67 00:05:12,650 --> 00:05:19,990 o Android, eu diria, portanto é um visual que eu quero ter aqui e você pode levar isso ainda mais longe. 68 00:05:20,070 --> 00:05:23,690 Digamos que queremos alterar a cor de fundo da barra de 69 00:05:23,830 --> 00:05:25,150 guias inteira aqui, 70 00:05:25,320 --> 00:05:30,800 dependendo da guia selecionada e ter um bom efeito cascata que muda isso ao longo do caminho. 71 00:05:31,110 --> 00:05:36,360 Para isso, podemos ir para a nossa tela de configuração e lá para as opções de navegação e lá, temos o 72 00:05:36,360 --> 00:05:37,780 ícone da barra de guias. 73 00:05:37,800 --> 00:05:42,760 Também podemos configurar uma cor da barra de guias aqui quando esta guia estiver 74 00:05:42,810 --> 00:05:51,160 selecionada, por exemplo, e definir por exemplo cores primárias e agora importantes, isso só terá efeito se você definir a mudança para true, 75 00:05:51,200 --> 00:05:58,850 caso contrário, essa cor será exibida. que estou configurando aqui não terá efeito, porque apenas o efeito de mudança suporta isso 76 00:05:58,850 --> 00:06:05,390 e o que teremos agora, o efeito que teremos agora é que, se eu salvar isso, tenha a 77 00:06:06,640 --> 00:06:12,810 mesma aparência no iOS porque há barra de guias a cor não tem efeito, mas agora veja, 78 00:06:13,030 --> 00:06:17,770 realmente temos nossa cor principal como plano de fundo se as refeições forem 79 00:06:17,770 --> 00:06:21,980 selecionadas, se selecionarmos favoritos, que mudará para a outra cor. 80 00:06:22,030 --> 00:06:27,940 Agora, essa mudança de curso não parece tão bonita e, portanto, podemos simplesmente mudar isso também dando à nossa tela 81 00:06:27,940 --> 00:06:30,950 de favoritos sua própria cor da barra de guias. 82 00:06:30,970 --> 00:06:36,430 Portanto, nas opções de navegação da tela de favoritos, ao lado do ícone da barra de guias, podemos definir 83 00:06:36,900 --> 00:06:44,340 a cor da barra de guias para acentuar a cor e o que teremos agora é uma barra de guias de cores diferentes que alterna da 84 00:06:44,340 --> 00:06:51,250 cor principal para as refeições aqui nesta cor de destaque para os favoritos com esse bom efeito cascata e, claro, a desvantagem é que 85 00:06:51,250 --> 00:06:56,910 não vemos o ícone porque a cor de destaque para a cor da barra de guias não é uma 86 00:06:56,910 --> 00:06:57,740 boa opção 87 00:06:57,750 --> 00:07:01,020 se a cor de tonalidade também for uma cor de destaque. 88 00:07:01,020 --> 00:07:06,270 Portanto, se usarmos esse efeito, talvez desejemos usar o branco aqui como uma cor de tonalidade que sempre 89 00:07:06,270 --> 00:07:13,020 podemos ver em relação à cor primária e de destaque e, portanto, aqui para a cor de tonalidade ativa, podemos querer usar branco 90 00:07:13,020 --> 00:07:18,750 em vez de nosso sotaque cor porque o branco funcionará para as duas guias, não importa se a barra de 91 00:07:18,750 --> 00:07:24,540 guias é colorida na cor primária, roxa escura ou na cor de destaque, laranja e, portanto, agora você vê que 92 00:07:24,540 --> 00:07:26,640 temos esse efeito aqui e essa 93 00:07:26,640 --> 00:07:32,610 agradável ondulação muda para a outra guia aqui para favoritos. E eu acho que é uma mudança muito doce 94 00:07:32,730 --> 00:07:39,120 e fácil de implementar, que faz com que isso pareça ótimo no Android e certamente nos dê uma aparência 95 00:07:39,240 --> 00:07:45,660 mais distinta do tipo Android, mantendo a aparência padrão do iOS que você esperaria nessa plataforma; é realmente fácil de 96 00:07:45,660 --> 00:07:47,730 implementar como você pode dizer. 97 00:07:47,820 --> 00:07:52,700 Agora, uma observação rápida: se você não quiser usar esse efeito de mudança que 98 00:07:52,710 --> 00:07:58,020 eu quero usar aqui, mas se você não quiser usá-lo, é claro que você poderá perceber 99 00:07:58,020 --> 00:08:06,350 que a cor de fundo de suas guias no Android é não sua cor principal, mas sim uma cor um pouco mais clara de roxo, roxo-azulado. 100 00:08:06,360 --> 00:08:09,060 Agora, normalmente, convém alterar isso também, é claro, e como 101 00:08:09,060 --> 00:08:12,060 você vê, a cor da barra de guias simplesmente não tem 102 00:08:12,060 --> 00:08:14,080 efeito, isso só funciona com a mudança. 103 00:08:14,310 --> 00:08:21,330 Agora, se você deseja alterar a cor do plano de fundo de toda a barra de guias no caso sem deslocamento, 104 00:08:21,330 --> 00:08:29,570 tudo o que você precisa fazer é aqui na configuração do seu navegador de guias, porque isso afeta toda a barra de guias agora, você 105 00:08:29,570 --> 00:08:30,410 pode configurar 106 00:08:30,410 --> 00:08:36,980 uma propriedade de estilo de barra e que simplesmente é um objeto de estilo onde você pode, por exemplo, definir 107 00:08:36,980 --> 00:08:43,240 a cor do plano de fundo como cores primárias, assim e isso simplesmente altera a cor do plano de 108 00:08:43,240 --> 00:08:47,180 fundo da barra de navegação da barra inferior do Android aqui. 109 00:08:47,180 --> 00:08:52,750 Então é assim que você pode mudar isso se não quiser usar o padrão de mudança aqui, a 110 00:08:52,790 --> 00:08:53,860 aparência de mudança. 111 00:08:54,080 --> 00:08:56,000 No entanto, ativarei a mudança novamente, 112 00:08:56,010 --> 00:09:01,370 definiremos isso como verdadeiro novamente, porque eu realmente gosto dessa barra de guias colorida diferente, acho 113 00:09:01,370 --> 00:09:07,100 que é uma aparência muito legal com esse efeito cascata que muda a cor e é fácil implementar 114 00:09:07,130 --> 00:09:08,660 diferentes barras de guias. 115 00:09:08,660 --> 00:09:13,820 Agora, novamente, existem várias opções de configuração, tanto para a barra de guias em si quanto para as opções de navegação 116 00:09:13,820 --> 00:09:18,590 das telas que você tem dentro da barra de guias e, portanto, você encontra os documentos oficiais anexados, onde 117 00:09:18,590 --> 00:09:22,490 você pode mergulhar em todas as opções e explorar eles e brincar com eles.