Então, eu quero começar com um ajuste fino da fonte em minhas guias aqui, no cabeçalho e também no
texto aqui em todas as minhas receitas. Quero ter certeza de que, em todos os lugares, estou usando a
fonte certa, minhas próprias fontes personalizadas e, especialmente aqui, no cabeçalho, nas guias, ainda não estamos garantindo isso.
Claro, é relativamente fácil garantir
isso e vamos começar com o cabeçalho. O cabeçalho geralmente possui um estilo, como a cor do plano de fundo,
com nossas opções de navegação padrão que sempre configuramos no
navegador da pilha, as opções de navegação padrão aqui permitem estilizar o cabeçalho e, por exemplo, atribuir ao cabeçalho em geral
um estilo e adicione uma cor de fundo.
Agora, é importante reconhecer aqui que o estilo do cabeçalho realmente visa apenas a caixa, o plano de fundo, por
assim dizer, o contêiner no qual os itens de ação, o botão voltar e esse título ficam, o título em si não pode ser
direcionado com o estilo de cabeçalho, mas
é claro que temos uma alternativa para isso. Além do estilo de cabeçalho, no qual podemos estilizar
esse contêiner de cabeçalho, também temos um estilo de título de cabeçalho e, sem surpresa, é direcionado para o componente
de texto no qual nosso título de cabeçalho é apresentado e podemos estilizá-lo como podemos estilizar elementos de texto no React
Native, por exemplo adicionando uma família de fontes open sans, novamente estou
usando a versão sem negrito para que possamos ver rapidamente a diferença.
Isso claramente não está mais em negrito, eu acho, é bem claro de ver, especialmente aqui no iOS e agora,
se eu definir isso em negrito, garanto que eu uso esse
estilo certo no iOS e no Android. Agora, para o texto de retorno aqui, a propósito, também
podemos substituir o padrão, que é a fonte padrão do sistema, definindo o estilo de título de cabeçalho para trás, que é
uma
configuração separada que podemos configurar aqui e ali, também podemos definir a família de fontes como
digamos open sans, não a versão
em negrito, não quero ter isso no estilo bold (realce), mas quero tê-lo em minha própria fonte e agora deve
ser open sans aqui e usar minha própria fonte. No Android, é claro, isso não tem efeito, porque
não temos texto de volta. Então isso é
o cabeçalho, para as guias é bem parecido. Lá, podemos ir para o navegador da guia que estamos criando,
como o navegador da
guia
inferior do material e, é claro, esse é o nosso tabScreenConfig e, em seguida, esse segundo objeto em que configuramos
o próprio navegador
e, como sempre, na opção React navigation, é o segundo objeto em que pode
controlar a aparência geral das coisas específicas do navegador, como no navegador da guia, a cor
do ícone da guia, a cor da barra, a cor da tonalidade ou também o estilo da etiqueta e, de fato, aqui nas opções
da barra de guias para o navegador da guia inferior, podemos adicionar
um estilo de etiqueta e, novamente, isso visa
o componente de texto que contém nossa etiqueta, podemos adicionar uma família
de fontes aqui do OpenSans-Bold para que possamos ver claramente a diferença, se isso for recarregada, agora isso claramente
é algum texto em negrito. Na verdade, isso não parece muito ruim,
então acho que podemos manter isso, mas
é claro que você também pode configurá-lo para abrir sans se você quiser uma versão mais fina, mas
agora eu usaria nossa própria fonte. Agora para Android,
aqui o navegador da guia inferior do material também possui algumas opções de configuração, mas, na verdade, ele
não possui um estilo de etiqueta.
Em vez disso, o que você pode fazer é nas guias separadas que você está carregando, assim nas opções de navegação das
guias que você está carregando, onde você também está configurando o ícone da barra de guias e assim por diante, para adicionar o rótulo da barra de guias
aqui, onde poderíamos definir um rótulo como refeições, várias marcas de explicação para substituir o que usamos como rótulo agora no iOS e
também
no Android e que pode realmente ser uma string como essa, mas você também pode definir isso como um
componente React, para um componente de texto, ou seja, e aí dentro, você pode configurar seu rótulo, refeições, mas é claro que agora
aqui, você pode adicionar estilo e adicionar os estilos que desejar.
Uma solução alternativa, já que não há outra maneira integrada de estilizar isso para o navegador
das guias inferiores do material, mas melhor do que nada.
Então, aqui, agora podemos definir a família de fontes como OpenSans-Bold e, se fizermos isso, é claro que também precisamos
garantir que agora importemos o componente de texto do React Native porque, caso contrário, não podemos usá-lo
lá e agora com isso , também temos isso no iOS, porque estamos compartilhando a configuração, vamos corrigir
isso em um segundo, mas agora, é assim que podemos definir nosso próprio estilo lá,
mas é claro que agora perdemos a cor que é a desvantagem de definir isso manualmente aqui e, como precisamos dessa solução alternativa aqui,
para Android, para as guias inferiores do material, a correção mais fácil é usar a API da plataforma e definir esse rótulo da barra
de guias apenas para esse componente de texto se ' re no Android, porque só então,
precisamos dessa solução alternativa para definir a família de fontes. Então, vou verificar se estamos no Android e, se for
o caso, retornarei um componente de texto aqui, caso contrário, retornarei as refeições de texto e a vantagem de retornar um texto aqui
simplesmente é que nosso outro as configurações que definem a cor da tonalidade, o estilo da etiqueta e assim
por diante serão ativadas e não serão substituídas. Se definirmos nosso próprio componente de texto, desabilitaremos todo esse
recurso padrão, todos esses recursos padrão que estão embutidos no navegador da guia inferior.
O problema com o navegador da guia inferior do material é que ele simplesmente não
possui todos
esses recursos padrão incorporados; portanto, precisamos substituir isso, mas precisamos fazer isso apenas para Android, por outro lado.
Agora podemos copiar isso e fazer exatamente a mesma coisa, é
claro, aqui para favoritos, renderizar favoritos como um texto no iOS e, é claro, também no componente de texto para Android e, com isso, agora devemos ter um
estilo que funcione e que pareça bom . No iOS, basicamente não mudamos
nada e no Android, agora também temos nossas próprias fontes personalizadas.
Portanto, é um pouco de solução alternativa que
é necessária aqui, infelizmente, ao trabalhar com o navegador das guias inferiores, mas também não é muito difícil de implementar e,
com isso, garantimos que estamos usando nossa própria fonte personalizada em qualquer lugar da navegação relacionada recursos
do nosso aplicativo.