Com isso, adicionamos guias e, sim, nos favoritos,
ainda não estamos fazendo
nada, isso é
algo que seguiremos, mas temos pelo menos guias. Antes de trabalharmos nos favoritos, vamos
trabalhar um pouco mais nas guias, porque agora, temos guias no Android que não
parecem realmente esperadas, mas parecem mais guias do iOS, se você me perguntar .
Claro que funciona e você pode manter isso, se esse
for o estilo que você deseja, nada de errado com isso, mas seria melhor ter uma aparência mais específica
do Android e, para isso, temos um navegador separado que podemos criar, embora tenhamos que instalar um pacote extra para isso antes de
tudo, então vamos fazer isso.
Deixe-me sair desse servidor aqui e executar o npm
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
Neste curso aqui, mas anexado, você também encontrará um link onde poderá aprender
mais sobre esse navegador alternativo. Usaremos o navegador das guias
inferiores do material aqui e instalaremos este pacote; é assim que começamos.
Então, vamos esperar que a instalação termine e, posteriormente, vamos instalar um
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
servidor expo
com o npm start
novamente, porque agora instalamos pacotes que nos ajudam
a renderizar um navegador de guias alternativo e, felizmente, é muito fácil
de usar e tem praticamente o mesmo ou muito opções de configuração semelhantes
às do navegador da guia inferior, especialmente quando se trata de
como configuramos ícones e assim por diante. Em anexo, você encontra todos os
documentos para
esse navegador alternativo e para esse outro navegador alternativo que eu mencionei e vamos usá-lo importando deste pacote de
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
do material aqui.
Agora, verifique se você também tem importações de plataforma, porque agora precisaremos disso, porque
eu só quero usar esse navegador em vez do
navegador criar aba inferior se estiver no Android. Então, aqui podemos verificar se a plataforma. os é igual ao Android e, nesse caso,
quero usar essa nova função de navegação de guia inferior do material de criação que
acabei de
importar; caso contrário, após os dois pontos, usaremos o navegador de guia inferior que configuramos na palestra anterior.
Portanto, é claro que isso nos deixa com uma pergunta: como o navegador da guia inferior do material funciona? Como configuramos isso?
E a boa notícia aqui é que geralmente funciona da mesma forma que o navegador da guia inferior.
Há alguns detalhes que você pode configurar no próprio navegador de
guias, por exemplo, qual cor assumir, quando e assim por diante, que
difere, mas com relação a como você configura suas guias e combina telas e ícones, é exatamente
o mesmo e, portanto, nós pode pegar essa configuração de tela inteira aqui, cortá-la daqui e armazená-la
em uma constante separada, aqui denominada tabScreenConfig, você pode nomear o que quiser, porque isso
pode ser reutilizado
e agora usar a tabScreenConfig como primeiro argumento no navegador da guia inferior, bem como no navegador da
guia inferior do material, assim e isso nos deixa apenas com um segundo argumento alternativo, que passamos ao
navegador da guia inferior do material e apenas ao navegador da guia inferior.
Esse segundo argumento que passamos, esse objeto que passamos como um segundo argumento, como você aprendeu, nos permite configurar
o próprio navegador de guias, por exemplo, configurar opções da barra de guias como a cor
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
nossa cor de tonalidade ativa. Em vez
disso, temos diretamente uma cor de tonalidade ativa aqui neste próprio objeto, no navegador da guia inferior, tivemos isso em um
objeto aninhado, nas opções da barra de guias ,
não temos isso aqui.
Em vez disso, aqui, apenas definimos a cor da tonalidade ativa assim para as cores de destaque e também
existem outras configurações. Por exemplo, você pode definir a mudança para true e mostrarei o que
isso faz e
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
e teremos as mesmas guias de antes no iOS, que
não
foram alteradas, mas no
Android, agora temos aquele navegador de guias com aparência
mais material, onde podemos agora também mude assim e esse é o efeito de
mudança que você vê aqui, que as guias crescem, que o rótulo existe apenas na guia que está
ativa e, se você
definir a mudança para false aqui, a propósito, você simplesmente não tem isso efeito, você
sempre terá seus rótulos no Android também.
Agora, esse é um visual que parece um pouco mais com
o Android, eu diria, portanto é um visual que eu quero ter aqui e você pode levar isso ainda mais longe.
Digamos que queremos alterar a cor de fundo da barra de
guias inteira aqui,
dependendo da guia selecionada e ter um bom efeito cascata que muda isso ao longo do caminho.
Para isso, podemos ir para a nossa tela de configuração e lá para as opções de navegação e lá, temos o
ícone da barra de guias.
Também podemos configurar uma cor da barra de guias aqui quando esta guia estiver
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,
caso contrário, essa cor será exibida. que estou configurando aqui não terá efeito, porque apenas o efeito de mudança suporta isso
e o que teremos agora, o efeito que teremos agora é que, se eu salvar isso, tenha a
mesma aparência no iOS porque há barra de guias a cor não tem efeito, mas agora veja,
realmente temos nossa cor principal como plano de fundo se as refeições forem
selecionadas, se selecionarmos favoritos, que mudará para a outra cor.
Agora, essa mudança de curso não parece tão bonita e, portanto, podemos simplesmente mudar isso também dando à nossa tela
de favoritos sua própria cor da barra de guias.
Portanto, nas opções de navegação da tela de favoritos, ao lado do ícone da barra de guias, podemos definir
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
cor principal para as refeições aqui nesta cor de destaque para os favoritos com esse bom efeito cascata e, claro, a desvantagem é que
não vemos o ícone porque a cor de destaque para a cor da barra de guias não é uma
boa opção
se a cor de tonalidade também for uma cor de destaque.
Portanto, se usarmos esse efeito, talvez desejemos usar o branco aqui como uma cor de tonalidade que sempre
podemos ver em relação à cor primária e de destaque e, portanto, aqui para a cor de tonalidade ativa, podemos querer usar branco
em vez de nosso sotaque cor porque o branco funcionará para as duas guias, não importa se a barra de
guias é colorida na cor primária, roxa escura ou na cor de destaque, laranja e, portanto, agora você vê que
temos esse efeito aqui e essa
agradável ondulação muda para a outra guia aqui para favoritos. E eu acho que é uma mudança muito doce
e fácil de implementar, que faz com que isso pareça ótimo no Android e certamente nos dê uma aparência
mais distinta do tipo Android, mantendo a aparência padrão do iOS que você esperaria nessa plataforma; é realmente fácil de
implementar como você pode dizer.
Agora, uma observação rápida: se você não quiser usar esse efeito de mudança que
eu quero usar aqui, mas se você não quiser usá-lo, é claro que você poderá perceber
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.
Agora, normalmente, convém alterar isso também, é claro, e como
você vê, a cor da barra de guias simplesmente não tem
efeito, isso só funciona com a mudança.
Agora, se você deseja alterar a cor do plano de fundo de toda a barra de guias no caso sem deslocamento,
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ê
pode configurar
uma propriedade de estilo de barra e que simplesmente é um objeto de estilo onde você pode, por exemplo, definir
a cor do plano de fundo como cores primárias, assim e isso simplesmente altera a cor do plano de
fundo da barra de navegação da barra inferior do Android aqui.
Então é assim que você pode mudar isso se não quiser usar o padrão de mudança aqui, a
aparência de mudança.
No entanto, ativarei a mudança novamente,
definiremos isso como verdadeiro novamente, porque eu realmente gosto dessa barra de guias colorida diferente, acho
que é uma aparência muito legal com esse efeito cascata que muda a cor e é fácil implementar
diferentes barras de guias.
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
das telas que você tem dentro da barra de guias e, portanto, você encontra os documentos oficiais anexados, onde
você pode mergulhar em todas as opções e explorar eles e brincar com eles.