Então, como podemos atribuir ícones aqui?
Como podemos então garantir que usamos a cor que
queremos usar?
Vamos começar com
a cor antes de adicionar os ícones. Assim como a função de navegação de pilha de
criação de pilha, o navegador de aba
criar parte inferior também utiliza um segundo argumento. O primeiro argumento é o seu objeto de configuração,
onde você configura as diferentes guias e as
telas para as quais apontam; o segundo argumento também é um objeto em que você pode configurar o navegador em geral e,
aí, você tem algumas configurações.
Novamente, os documentos oficiais são o local para aprender sobre todas as configurações
aqui, uma das configurações mais importantes aqui são as opções da barra de guias.
Este é outro objeto e, lá, você pode controlar em detalhes como a barra de guias aparece, como é estilizada.
Você pode configurar uma cor de tonalidade inativa, que é a cor da guia que não está ativa no momento.
Você pode configurar uma cor de tonalidade ativa e é disso que realmente precisamos
aqui, você pode configurar uma cor de plano de fundo ativa e uma cor de plano de fundo inativa,
bem como, é claro, também alterar o plano de fundo
das guias aqui, se desejar e, portanto, muitas possibilidades para realmente ajustar isso às suas necessidades.
E aqui, definirei uma cor de tonalidade ativa, porque é
tudo o que preciso aqui, mas é claro, fique à vontade para brincar com isso e alterar as cores
de fundo também e alterar outras configurações. Definirei minha cor de tonalidade ativa como um valor para minhas cores constantes
que eu importo aqui, vou defini-las como cores acentuadas.
Você não o usou antes, mas agora
eu vou usá-lo e essa é a cor laranja que agora temos, e é assim que mudamos
a cor da guia ativa. Agora isso é uma coisa,
observe também que, obviamente, isso não adiciona um ícone e como seria,
não
estamos dizendo nada sobre o ícone que queremos adicionar. Agora, para adicionar o ícone, acho que o padrão
direto é que você vá para a sua configuração de rota aqui, para
a configuração em que você mapeia as telas para suas guias e usa o formulário mais longo em
que você adiciona a propriedade screen e onde também adiciona opções de navegação.
A propósito, você também pode fazer isso diretamente no componente, naturalmente, adicionando opções de
navegação, como fizemos anteriormente, no
entanto, como as refeições aqui na verdade são um navegador, o único local para
adicionar opções de
navegação é claro aqui ou também aqui, em criar navegador de pilha.
Lá, você também pode configurar uma chave de opções de navegação aqui no segundo argumento; nesse objeto, você
passa como um segundo argumento para criar um navegador de pilha, onde você configura o
navegador geral para fornecer ao próprio navegador algumas opções de navegação, porque as opções de navegação atribuídas a
o navegador de refeições, portanto, para o navegador de pilha, agora são as opções levadas em conta pelo
navegador de guias que usa esse navegador de refeições como um navegador aninhado e as opções de navegação que podemos
definir aqui incluem um ícone da barra de guias. Podemos adicionar o ícone da barra de guias aqui e o ícone da barra de guias é realmente uma função. Não é um único ícone
que você aponta, mas sim uma função. É uma função que recebe algumas informações da guia que você poderia
dizer, deve ir aqui, esse é o argumento que obtemos automaticamente, porque essa
função obviamente será chamada pelo ícone React Navigation e da barra de guias, essa função aqui
tem que retornar o ícone que você deseja renderizar para esta guia, portanto, neste caso, para
a guia refeições.
Isso significa que eu preciso usar ícones aqui e, para isso, podemos importar ionicons ou qualquer outro conjunto
de ícones que você queira usar do @ expo / vector-icons.
Novamente, sinta-se à vontade para
instalar este pacote, normalmente ele deve ser instalado automaticamente ao trabalhar com a Expo, mas você pode
simplesmente executar o npm install --save @ expo / vector-icons para ter certeza de que está instalado e usar qualquer
conjunto de ícones você quer, mas eu sempre uso os ionicons ao longo deste curso, vou cumpri-los.
Com isso, você pode usar os ionicons como um componente, como aprendeu anteriormente no curso.
Então, aqui podemos apenas retornar ionicons como este para renderizar um ícone de ionicon e agora você
pode usar qualquer
nome de ícone que desejar aqui e aqui eu quero usar
o ios-restaurant, que é simplesmente um ícone que encontrei na lista de ícones, nesta
lista aqui que também mostrei anteriormente, é esse ícone
do ios-restaurante que eu escolhi, que agora uso e que aponto aqui.
Este é o ícone que eu quero
renderizar, eu darei um tamanho de
25, você
pode experimentar, mas eu achei 25 bastante
decentes aqui na barra de guias e em uma
cor, e isso agora é importante para o tabInfo. tintColor porque a cor que definimos aqui, obviamente, deve ser a nossa cor de
matiz que configuramos aqui.
Agora, é claro, poderíamos codificar isso para colorir cores de destaque aqui,
mas se a mudarmos lá em baixo, teremos que lembrar que também a mudaremos lá em cima.
A coisa boa é e é por isso que essa é uma função, que a navegação React chama
essa função para nós e nos fornece algumas informações vitais sobre como nossa barra de guias é configurada nesse objeto de informações
da guia e que, por exemplo, inclui a cor da tonalidade que configuramos , para que possamos recuperar dinamicamente
isso aqui para colorir o ícone, para que, se mudarmos a cor da barra de guias para baixo, ela seja refletida
automaticamente em nossos ícones
lá em cima, por isso é uma pequena conveniência que temos aqui que podemos usar aqui .
Então, com isso, estou renderizando esses ícones para as refeições e para os favoritos, agora podemos usar uma abordagem semelhante, usar essa forma mais longa onde
configuramos a tela aqui e, em seguida, adicionar opções de navegação aqui que serão mescladas com qualquer navegação opções que configuramos
na tela de favoritos mas lembre-se de que é claro que você também pode configurar as opções de navegação
aqui no componente da tela de favoritos. Portanto, para manter tudo em um
só lugar, eu o farei na minha navegação aqui.
Portanto, essas são as minhas opções
de navegação para essa tela, assim como para este navegador, o navegador de refeições, é claro
que podemos configurar opções de navegação para uma
tela, foi o que fizemos durante todo o módulo, afinal, quero fazer essencialmente o mesmo, então copiarei
isso, adicione-o aqui a este objeto de opções de navegação e a única coisa que difere aqui é
o ícone que eu quero usar, aqui é ios-star em vez de ios-restaurant.
E com isso, se salvarmos isso, eu realmente recebo um erro porque, agora que uso o
jsx aqui, precisamos importar o React, é claro, é assim que o React funciona porque o jsx
nos bastidores é transformado em React criar elemento como você conhece e, portanto, agora depois de adicionar a
importação React aqui no MealsNavigator. arquivo js. Isso funciona e agora temos ícones que recebem
automaticamente a cor da tonalidade e é assim que você pode adicionar ícones com facilidade.
Agora, além de definir o ícone, você também pode definir o rótulo e verá que, por
padrão, o rótulo, as refeições e os favoritos são simplesmente o identificador que atribuímos aqui quando configuramos nossas guias de
navegação e favoritos.
Agora, muitas vezes, isso faz sentido, mas caso você queira ter um rótulo diferente, nas opções de
navegação da tela carregadas aqui nesta guia, você pode configurar
uma propriedade de rótulo da barra de guias e, lá, isso é apenas uma string onde você pode ter favoritos com um ponto de exclamação
e, se você definir isso, verá que agora você tem favoritos com um ponto de exclamação aqui,
em vez de apenas favoritos como antes.
Assim, você pode substituir esse rótulo padrão, que normalmente é o seu identificador, se você quiser
um diferente, pode substituí-lo e, é claro, existem mais opções que você pode definir e
anexar, e encontra um link para os documentos oficiais de neste navegador, onde você pode
aprender tudo sobre as opções que podem ser configuradas no próprio navegador, mas também nas opções de navegação de telas filho, de telas aninhadas
ou navegadores aninhados dentro desse navegador de guias, então o que estamos
configurando aqui.