Agora também quero usar essa família de fontes para o título do cabeçalho.
Portanto, aqui no meu componente de cabeçalho, no
título do cabeçalho, também quero definir uma família de fontes como open-sans-bold para que possamos usá-lo também e
para todos os outros textos deste aplicativo, na verdade, quero usar meu open sem fonte.
Por exemplo, nos jogos iniciais verdes aqui, temos o nosso texto, selecionamos um número e, para usar a fonte open
sans normal, é claro que podemos atribuir um estilo lá e, em seguida, usar o texto styles por exemplo e adicionar esse estilo
de texto aqui no inferior e use a família de fontes open-sans. Agora isso funciona, mas é claro que tem
uma desvantagem.
A desvantagem é que agora você precisa adicionar manualmente essa família de fontes a qualquer texto em seu
aplicativo em que deseja usá-la e precisa adicioná-lo diretamente nos componentes de texto, não pode adicioná-lo
a uma visualização e, por exemplo, definir isso na tela aqui e conte com o fato de ser transmitido para textos
aninhados, infelizmente isso não funciona.
Portanto, se eu for para a tela aqui e definir a família de fontes como open-sans-bold, para que possamos ver facilmente se funciona ou não, você
vê claramente que não está em negrito, selecione um número que não esteja em negrito.
Passá-lo assim, como se funcionasse em CSS, não funciona porque não é CSS, é Javascript
e o que você aplica em um objeto é aplicado apenas no elemento, no componente ao qual esse
objeto de estilo está anexado.
Portanto, teríamos de estilizar esse texto individualmente, mas novamente, recriar esse estilo repetidamente em todos os lugares
diferentes pode não ser o que você deseja fazer no final.
Existem duas soluções alternativas ou a solução sempre soa um pouco suja,
duas maneiras de lidar com isso de uma maneira mais elegante.
Uma é que você cria um componente separado, talvez um componente de texto do corpo ou apenas um componente
de texto, seja qual
for o nome e o nome de BodyText. js e será um componente muito
simples, eu apenas importo React de React e importo texto e folha de estilo do React Native aqui e, em seguida,
o componente de texto do corpo aqui obtém adereços e simplesmente retorna meu componente de texto aqui, onde produzo adereços filhos entre os
tags de texto para
que possamos passar o conteúdo para o texto do corpo passando-o entre a tag de texto
do corpo de abertura e fechamento quando usamos esse componente.
Então aqui eu tenho meus estilos e lá, eu uso o Stylesheet. crie e, claro, eu exporto esse
componente assim e agora aqui nesta folha de estilo, simplesmente defino um estilo
que aplico aqui a este texto, estilos body ou o que você quiser nomeá-lo, tenha o estilo
body
aqui e o estilo I set é a
família de fontes open sans e vou usar negrito por enquanto, para que possamos ver que isso realmente
tem um efeito
antes de alterá-lo para um pouco mais difícil de ver, open sans, open-sans-bold e agora isso é
um componente muito simples, apenas um invólucro fino em torno do texto normal, mas um invólucro fino que
sempre define essa família de fontes
e isso significa que sempre que queremos ter um texto que use essa família, talvez
em todos os lugares do aplicativo, em vez de usar o componente de texto normal do React Native, usamos apenas o
componente de texto do corpo que acabei de criar. Então, eu posso importar o texto do
corpo dos componentes BodyText, importando esse componente e agora posso simplesmente substituir o componente de texto aqui pelo texto do corpo. Se
fizermos isso e salvarmos isso, é claro que veremos que agora isso ficará em
negrito, bem, se eu teria usado no texto certo, é claro que o texto selecionado pelo
usuário, também está bom lá, mas eu quero ir aqui para selecionar o número.
Portanto, se eu usá-lo lá, o texto do corpo, enrole esse texto, veja agora que está em negrito e agora também podemos voltar
e fornecer ao texto do corpo a aparência de sans aberta realmente pretendida, que ainda não é a fonte padrão, mas que pode ' Não se
percebe imediatamente que é uma fonte diferente.
Portanto, essa é uma opção para transmitir estilo de texto ou uma família de fontes, você simplesmente cria seu próprio componente
de texto que sempre possui essa família de fontes e, se você tem várias famílias
de fontes diferentes, como um título e um cabeçalho, cria componentes separados.
Por exemplo, aqui, temos um título, talvez também possamos usá-lo em outras partes do aplicativo. Assim, podemos
adicionar um TitleText. arquivo js, que é basicamente o que temos no corpo
do texto, então vou copiá-lo e movê-lo para o texto do título e, em seguida, aqui, temos o nome do texto do
título e aqui, é o texto do título e,
usamos open-sans- negrito e talvez para o título, também tenham tamanho de fonte 18 e agora, novamente, vamos renomear para
título, talvez, faça mais sentido para o suporte de estilo, mas agora, novamente, temos um invólucro muito fino ao
redor do texto e em todos os lugares onde precisamos do título, como no cabeçalho, por exemplo, podemos nos livrar dessa atribuição de estilo manual
aqui no componente do cabeçalho e, em vez disso, basta importar o texto do título a partir do componente de texto do título e usá-lo em vez do
texto, livrar-se desse estilo atribuição aqui, assim e faça o mesmo na
tela inicial do jogo. Agora, esse texto agora
pode ser um título, tudo o que preciso
fazer é importá-lo. Então, deixe-me importar o
texto do título da pasta de componentes e, a partir do texto do título, e agora podemos reutilizá-lo e, como fizemos anteriormente com o cartão, por
exemplo, se você quiser que ele ainda seja personalizável para que possamos definir mais o título ou substituir o
tamanho da fonte ou adicionar uma margem, como estamos fazendo aqui, bem, o que você sempre
pode fazer é ainda adicionar estilo aqui ao texto do título, referir-se ao estilo dos títulos e, portanto, ao estilo
do título que tenho configurado lá na tela inicial do jogo e dentro do componente de texto do título,
você só precisa certificar-se de mesclar esses estilos recebidos com os estilos que você está
configurando lá.
Portanto, aqui, o estilo agora aponta para um objeto em que você pega todos os valores nos títulos configurados aqui e os mescla ou
os substitui por todos os valores configurados no estilo props e agora você tem uma
camada de texto ajustável que define esses estilos padrão mas que pode ser substituído e ajustado às
suas necessidades e, portanto,
temos a mesma aparência de antes, mas agora com mais usabilidade.
Agora, novamente, essa é a opção número um.
A alternativa seria que, por exemplo, na pasta constantes, você tenha seus estilos padrão. arquivo js ou o nome que você
quiser e, nele,
você exporta uma folha de estilo padrão e, portanto, é necessário importá-la, importe a folha
de estilo do React Native.
Você exporta sua folha de estilo padrão. crie um objeto e lá você configura como o texto do seu corpo, por exemplo, qualquer nome que
desejar e
aqui define uma família de fontes, abre sans e talvez apenas temporariamente, para que possamos ver se isso
funciona, dê uma cor vermelha.
Agora você pode importar isso para arquivos
diferentes, digamos na tela do jogo, agora podemos importar estilos padrão da pasta constantes e lá, estilos padrão e se queremos agora esse estilo de texto padrão, por
exemplo, aqui, na opinião dos oponentes, bem, então
tudo o que fazemos
é definir o estilo aqui, acessar os estilos padrão e apontar para o texto do
corpo e você verá se iniciaremos um jogo agora, esse
texto será vermelho.
Então, se começarmos este jogo, os adversários acham que é vermelho.
Portanto, isso seria uma alternativa a componentes separados, que você simplesmente possui uma folha de estilo gerenciada globalmente
que importa em arquivos diferentes e agora não preciso
realmente de um texto do corpo em vermelho, mas o que eu quero é que haja um título ,
Eu quero ter uma família de fontes open-sans-bold e tamanho de fonte digamos 18 e sim, eu tenho a mesma configuração no texto do título,
apenas a recrio aqui para mostrar as
duas alternativas, porque agora com como o título está sendo configurado assim na folha de estilo padrão,
agora podemos ir para a tela do jogo e ouvir não usar o texto do corpo, mas usar
o título no palpite do oponente e o resultado disso é que, se reiniciarmos agora o jogo, tem esse belo
título aqui.
Portanto, essa é uma alternativa válida e depende de você qual você prefere, separe os
componentes que você reutiliza em vez do componente de texto ou de texto com um estilo gerenciado globalmente
e, como observação lateral, nesse estilo gerenciado globalmente, você é curso não restrito ao gerenciamento de propriedades específicas
da fonte, você pode gerenciar qualquer estilo aqui. Portanto, qualquer estilo que você deseja compartilhar entre os
componentes pode ser gerenciado em uma folha de estilo global, que pode ser configurações gerais de layout, cores, cores que podem ser
o que você deseja, mas geralmente você sempre deve optar entre criar componentes separados, como o componente de cartão que é um invólucro em
torno da visualização ou do texto do corpo ou do texto do título, que também são
apenas invólucros que adicionam algum estilo ou gerenciam isso aqui em uma folha de estilo global, é com você
o que você prefere.
Pessoalmente, preferi a abordagem orientada a componentes, porque no final o React é sobre componentes e, portanto,
acho que ficamos um pouco mais próximos do mundo padrão do React, fazendo assim, mas também
não é uma decisão em que você sempre deve seguir o caminho A ou caminho B, você pode misturar e combinar esses conceitos, talvez
às vezes tenha algo em que um componente separado não faça muito sentido, gerencie-o em
um estilo global e, em outros casos, talvez um componente personalizado faça mais sentido do que ter uma configuração
de estilo global.