Agora, com essa imagem adicionada e agora que já estamos trabalhando na tela do jogo aqui, vamos ajustar este
texto que vemos aqui na parte inferior, vamos
torná-lo um pouco mais agradável, um pouco mais bonito e além disso antes Eu
faço isso, na verdade vou voltar a usar a imagem de rede para a imagem local, mas é
claro que depende totalmente de você, o que você prefere lá.
Então, eu quero trabalhar no texto aqui e, em vez de apenas ter esse tipo de texto tabular aqui,
que apenas gera algumas informações de uma maneira chata, por
que não apresentamos isso em uma espera mais agradável? Em detalhes, acho que seria melhor
se tivéssemos algum texto legível por humanos aqui, para uma sentença real que possamos ler.
Então, podemos dizer que o telefone é necessário e, aqui, temos o número de rodadas, rodadas para adivinhar o número e que
aqui seria digitado o número.
Portanto, o número do curso é número de usuário de adereços e, novamente, você pode se livrar
dessa linha agora, mas eu não quero apenas exibir o número de usuário de adereços assim, em vez disso, quero
destacá-lo, quero dar uma cor especial isso é diferente da outra cor aqui e a mesma aqui para as rodadas; portanto, o número de
adereços rodadas de valor seria bom se isso também fosse colorido de forma diferente. Agora, para colorir de maneira diferente, podemos
colocar isso em outro nó de texto aqui. Assim, você pode ter nós de texto, componentes de
texto dentro do texto, dentro de outros componentes do texto,
para que isso seja possível, exatamente assim.
Agora que é realmente importante entender,
você pode aninhar componentes de texto em outros componentes de texto e ter em mente que o texto do corpo no
final é apenas um componente de texto, o texto do corpo é um componente que simplesmente
retorna o componente de texto incorporado, portanto, qualquer coisa que digitar entre o texto do corpo é o mesmo
que inserir entre os componentes de texto integrados e, portanto, podemos ter um texto aninhado lá e, teoricamente, também podemos
ter vistas aninhadas lá, mas existem algumas ressalvas e, portanto, se você absolutamente não há uma razão
forte para o porquê você precisaria de uma visualização, não deveria realmente aninhar as visualizações no texto
e raramente há uma razão para fazer isso. O texto dentro do texto, no entanto, pode
fazer muito sentido, pois permite estilizar partes de um texto de maneira diferente do restante.
Então aqui, por exemplo, quero adicionar estilo com estilos. destaque e o mesmo aqui para o segundo texto para
destacar esta parte do texto e agora, é claro, podemos adicionar destaque lá em nossa folha de estilos na
tela de game over, destaque e lá, por exemplo, dê a isso uma cor em que usamos cores e para isso, precisamos
adicionar a importação de onde importamos cores de constantes / Cores e, em seguida, talvez usar nossa
cor principal lá, então Cores. primário. Se fizermos isso, o que você verá é que agora, isso é realçado.
Agora também algo interessante: se eu for temporariamente para o texto do corpo e o alterar
para abrir
sem negrito aqui, então uso a versão em negrito, você verá que mesmo o texto destacado ainda está em
negrito, pode ser um pouco difícil de ver mas isso é realmente ousado e isso é muito interessante
porque, no início do curso, mencionei que seus estilos não seriam herdados, de modo que, por exemplo, na tela de
game over, defina uma família de fontes aqui no estilo de sua tela, aplicada a a visão que envolve tudo, essa família de fontes
não seria passada para componentes aninhados dentro dessa visão.
Portanto, apenas porque você define um estilo aqui nesta exibição não significa que todas as outras exibições ou todos os outros
textos, o que quer que seja, tenham os mesmos estilos. Os estilos aplicados a um componente sempre
são aplicados apenas a esse componente e não a componentes aninhados, e ainda assim são diferentes para o texto.
Lá, este texto aqui, o texto destacado que está aninhado dentro do texto do corpo também recebe essa família em negrito se a alterarmos no texto do
corpo e
isso é simplesmente uma diferença importante que o React Native possui. Para componentes de texto, se você adicionar
estilo,
o estilo será passado para os componentes de texto aninhados, essa é uma
exceção que o React Native possui. O texto dentro do texto recebe o
estilo definido no texto externo; portanto, qualquer estilo configurado no texto do corpo aqui é recebido automaticamente pelos componentes de texto aninhados.
Há um comportamento adicional importante em relação ao componente de texto no React Native e é que ele
não está usando o flexbox. A view usa flexbox,
o componente de texto, é claro, não e eu mencionei isso antes, que o
componente view usa flexbox, não texto ou outros componentes, mas o texto usa seu próprio sistema de posicionamento, onde ele se envolve automaticamente em
uma nova linha, se isso não acontecer ' Se não caber em uma linha e para
demonstrar isso, poderíamos ir para a tela do game over e agrupar todo o texto aqui na parte inferior em outra visualização.
Portanto, pegue o texto do corpo e adicione-o aqui a essa visualização e adicione um estilo de, digamos, nomeie o resultado como texto, o que
você quiser nomear como este ou como contêiner de resultado para ficar mais alinhado com os outros nomes de estilo.
Portanto, o contêiner de resultados é
adicionado à visualização e agora, se eu adicionar aqui, em qualquer lugar da minha folha de estilo, e fornecer uma largura de, digamos, 80%, o
que faz sentido para que o texto tenha um pouco mais de distância
à esquerda e à direita ou Como alternativa, adiciono uma margem horizontal, digamos 20, para ter algum espaçamento esquerdo e direito ao redor do
contêiner; então, você vê que o texto está realmente envolvido em uma nova linha e também é um comportamento
padrão do componente de texto no React Native.
Ele não apenas analisa os estilos até o texto aninhado, mas também possui seu próprio sistema de posicionamento ou seu próprio sistema
de layout, onde o texto se agrupa automaticamente em uma nova linha, se não se
encaixa na mesma linha e, é claro, gera muito do sentido, normalmente é o que você deseja no
seu texto, e deseja que ele seja agrupado em novas linhas. Agora, com isso, vou reverter essa configuração no corpo do texto, na
verdade não
vou usar open-sans-bold aqui, apenas uso open
sans, mas eu queria mostrar essa coisa de herança de estilo e também, é claro, em geral permitir que
você saber como o texto se comporta em relação à maneira como é layout.
Apesar de tudo o que foi dito sobre
o texto, ainda não terminamos, acho que
não parece tão bom; em vez disso, na tela do jogo, esse texto destacado talvez deva ser negrito, então usarei
uma família de fontes aberta -sans-bold aqui, para que isso realmente se destaque e seja mais fácil
de ver, além disso, adicionarei uma margem horizontal de 30 aqui para ter um pouco mais de espaço da esquerda para a direita
ao redor do texto.
Agora, além disso, também quero garantir que o texto esteja centralizado, para que, se houver uma quebra
de linha, ele esteja centralizado no meio e não recomeçarmos na borda esquerda, e isso agora possa ser alcançado
com uma propriedade de
estilo especial que você pode adicionar aos componentes
de texto e essa é a propriedade alinhar texto.
O problema é que não quero usar isso no texto destacado, quero usá-lo
no texto geral do corpo e, portanto, precisamos adicionar um estilo aqui, talvez o texto resultante seja um
nome adequado aqui, pois esse é o nosso texto geral e,
em seguida, aqui podemos apenas adicionar
o texto
resultante e, nesse texto, definir o alinhamento do texto para o centro.
No entanto, se eu salvar isso, ele não terá efeito, porque o texto do nosso corpo não está configurado para levar em consideração o estilo,
o suporte de estilo que poderemos adicionar a ele. No texto do corpo, o único estilo definido para o
texto é o estilo definido internamente.
Agora, aprendemos como mudar isso, no entanto, simplesmente passamos um objeto aqui
para estilizar, pegamos todas as nossas propriedades de estilo personalizadas desse arquivo e as distribuímos nesse objeto e mesclamos isso
com o que estivermos usando no estilo props usando o operador spread
aqui também. E com isso,
agora, se salvarmos isso, vemos que agora está bem centralizado e isso certamente é um pouco mais agradável de ler
do que era antes de eu dizer.
Agora, com isso, estamos quase terminando de modelar esse texto, a última coisa que acho legal aqui é que,
se no texto resultante, também aumentamos um pouco o tamanho da fonte.
Portanto, se definirmos o tamanho da fonte aqui como 20, talvez, muito grande e no contêiner
de resultados, também quero ter uma margem vertical de 15, talvez, para ter algum espaçamento na parte superior e inferior
do texto também.
E agora, com isso, temos uma tela de game over que, na minha opinião, não parece muito ruim e
você aprendeu muito sobre como o texto funciona, para que você possa trabalhar com o componente de texto no React Native.