1 00:00:02,320 --> 00:00:08,220 Agora, com essa imagem adicionada e agora que já estamos trabalhando na tela do jogo aqui, vamos ajustar este 2 00:00:08,230 --> 00:00:11,280 texto que vemos aqui na parte inferior, vamos 3 00:00:11,280 --> 00:00:15,640 torná-lo um pouco mais agradável, um pouco mais bonito e além disso antes Eu 4 00:00:15,760 --> 00:00:21,400 faço isso, na verdade vou voltar a usar a imagem de rede para a imagem local, mas é 5 00:00:21,400 --> 00:00:24,850 claro que depende totalmente de você, o que você prefere lá. 6 00:00:24,850 --> 00:00:29,890 Então, eu quero trabalhar no texto aqui e, em vez de apenas ter esse tipo de texto tabular aqui, 7 00:00:29,930 --> 00:00:32,560 que apenas gera algumas informações de uma maneira chata, por 8 00:00:32,560 --> 00:00:37,460 que não apresentamos isso em uma espera mais agradável? Em detalhes, acho que seria melhor 9 00:00:37,600 --> 00:00:43,030 se tivéssemos algum texto legível por humanos aqui, para uma sentença real que possamos ler. 10 00:00:43,400 --> 00:00:52,720 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 11 00:00:52,800 --> 00:00:55,140 aqui seria digitado o número. 12 00:00:55,240 --> 00:00:59,810 Portanto, o número do curso é número de usuário de adereços e, novamente, você pode se livrar 13 00:00:59,950 --> 00:01:05,260 dessa linha agora, mas eu não quero apenas exibir o número de usuário de adereços assim, em vez disso, quero 14 00:01:05,260 --> 00:01:11,680 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 15 00:01:11,690 --> 00:01:19,480 adereços rodadas de valor seria bom se isso também fosse colorido de forma diferente. Agora, para colorir de maneira diferente, podemos 16 00:01:19,480 --> 00:01:28,150 colocar isso em outro nó de texto aqui. Assim, você pode ter nós de texto, componentes de 17 00:01:28,150 --> 00:01:32,920 texto dentro do texto, dentro de outros componentes do texto, 18 00:01:32,920 --> 00:01:36,820 para que isso seja possível, exatamente assim. 19 00:01:36,820 --> 00:01:38,970 Agora que é realmente importante entender, 20 00:01:38,970 --> 00:01:45,790 você pode aninhar componentes de texto em outros componentes de texto e ter em mente que o texto do corpo no 21 00:01:45,790 --> 00:01:51,080 final é apenas um componente de texto, o texto do corpo é um componente que simplesmente 22 00:01:51,160 --> 00:01:57,100 retorna o componente de texto incorporado, portanto, qualquer coisa que digitar entre o texto do corpo é o mesmo 23 00:01:57,100 --> 00:02:03,430 que inserir entre os componentes de texto integrados e, portanto, podemos ter um texto aninhado lá e, teoricamente, também podemos 24 00:02:03,430 --> 00:02:08,800 ter vistas aninhadas lá, mas existem algumas ressalvas e, portanto, se você absolutamente não há uma razão 25 00:02:08,800 --> 00:02:14,370 forte para o porquê você precisaria de uma visualização, não deveria realmente aninhar as visualizações no texto 26 00:02:14,370 --> 00:02:20,020 e raramente há uma razão para fazer isso. O texto dentro do texto, no entanto, pode 27 00:02:20,020 --> 00:02:25,310 fazer muito sentido, pois permite estilizar partes de um texto de maneira diferente do restante. 28 00:02:25,360 --> 00:02:32,970 Então aqui, por exemplo, quero adicionar estilo com estilos. destaque e o mesmo aqui para o segundo texto para 29 00:02:33,210 --> 00:02:40,170 destacar esta parte do texto e agora, é claro, podemos adicionar destaque lá em nossa folha de estilos na 30 00:02:40,170 --> 00:02:48,510 tela de game over, destaque e lá, por exemplo, dê a isso uma cor em que usamos cores e para isso, precisamos 31 00:02:48,530 --> 00:02:55,010 adicionar a importação de onde importamos cores de constantes / Cores e, em seguida, talvez usar nossa 32 00:02:55,010 --> 00:03:02,420 cor principal lá, então Cores. primário. Se fizermos isso, o que você verá é que agora, isso é realçado. 33 00:03:03,440 --> 00:03:09,350 Agora também algo interessante: se eu for temporariamente para o texto do corpo e o alterar 34 00:03:09,350 --> 00:03:10,210 para abrir 35 00:03:10,490 --> 00:03:17,150 sem negrito aqui, então uso a versão em negrito, você verá que mesmo o texto destacado ainda está em 36 00:03:17,150 --> 00:03:23,570 negrito, pode ser um pouco difícil de ver mas isso é realmente ousado e isso é muito interessante 37 00:03:23,870 --> 00:03:30,860 porque, no início do curso, mencionei que seus estilos não seriam herdados, de modo que, por exemplo, na tela de 38 00:03:30,860 --> 00:03:39,170 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 39 00:03:39,470 --> 00:03:42,970 não seria passada para componentes aninhados dentro dessa visão. 40 00:03:42,980 --> 00:03:48,490 Portanto, apenas porque você define um estilo aqui nesta exibição não significa que todas as outras exibições ou todos os outros 41 00:03:48,490 --> 00:03:54,080 textos, o que quer que seja, tenham os mesmos estilos. Os estilos aplicados a um componente sempre 42 00:03:54,080 --> 00:04:00,780 são aplicados apenas a esse componente e não a componentes aninhados, e ainda assim são diferentes para o texto. 43 00:04:00,780 --> 00:04:09,050 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 44 00:04:09,260 --> 00:04:10,160 corpo e 45 00:04:10,250 --> 00:04:16,550 isso é simplesmente uma diferença importante que o React Native possui. Para componentes de texto, se você adicionar 46 00:04:16,580 --> 00:04:17,720 estilo, 47 00:04:17,720 --> 00:04:23,900 o estilo será passado para os componentes de texto aninhados, essa é uma 48 00:04:23,900 --> 00:04:29,750 exceção que o React Native possui. O texto dentro do texto recebe o 49 00:04:29,750 --> 00:04:37,610 estilo definido no texto externo; portanto, qualquer estilo configurado no texto do corpo aqui é recebido automaticamente pelos componentes de texto aninhados. 50 00:04:37,680 --> 00:04:43,800 Há um comportamento adicional importante em relação ao componente de texto no React Native e é que ele 51 00:04:43,800 --> 00:04:47,370 não está usando o flexbox. A view usa flexbox, 52 00:04:47,370 --> 00:04:52,110 o componente de texto, é claro, não e eu mencionei isso antes, que o 53 00:04:52,320 --> 00:05:00,180 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 54 00:05:00,210 --> 00:05:05,580 uma nova linha, se isso não acontecer ' Se não caber em uma linha e para 55 00:05:05,580 --> 00:05:12,810 demonstrar isso, poderíamos ir para a tela do game over e agrupar todo o texto aqui na parte inferior em outra visualização. 56 00:05:12,810 --> 00:05:21,180 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 57 00:05:21,210 --> 00:05:28,080 você quiser nomear como este ou como contêiner de resultado para ficar mais alinhado com os outros nomes de estilo. 58 00:05:28,170 --> 00:05:30,410 Portanto, o contêiner de resultados é 59 00:05:30,570 --> 00:05:38,300 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 60 00:05:38,550 --> 00:05:42,420 que faz sentido para que o texto tenha um pouco mais de distância 61 00:05:42,480 --> 00:05:49,980 à esquerda e à direita ou Como alternativa, adiciono uma margem horizontal, digamos 20, para ter algum espaçamento esquerdo e direito ao redor do 62 00:05:49,980 --> 00:05:55,980 contêiner; então, você vê que o texto está realmente envolvido em uma nova linha e também é um comportamento 63 00:05:55,980 --> 00:05:58,410 padrão do componente de texto no React Native. 64 00:05:58,410 --> 00:06:05,700 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 65 00:06:05,700 --> 00:06:10,950 de layout, onde o texto se agrupa automaticamente em uma nova linha, se não se 66 00:06:11,040 --> 00:06:16,830 encaixa na mesma linha e, é claro, gera muito do sentido, normalmente é o que você deseja no 67 00:06:17,070 --> 00:06:24,920 seu texto, e deseja que ele seja agrupado em novas linhas. Agora, com isso, vou reverter essa configuração no corpo do texto, na 68 00:06:24,920 --> 00:06:25,880 verdade não 69 00:06:25,880 --> 00:06:28,190 vou usar open-sans-bold aqui, apenas uso open 70 00:06:28,310 --> 00:06:34,530 sans, mas eu queria mostrar essa coisa de herança de estilo e também, é claro, em geral permitir que 71 00:06:34,580 --> 00:06:38,960 você saber como o texto se comporta em relação à maneira como é layout. 72 00:06:38,960 --> 00:06:41,450 Apesar de tudo o que foi dito sobre 73 00:06:41,480 --> 00:06:43,730 o texto, ainda não terminamos, acho que 74 00:06:43,760 --> 00:06:49,860 não parece tão bom; em vez disso, na tela do jogo, esse texto destacado talvez deva ser negrito, então usarei 75 00:06:50,100 --> 00:06:55,400 uma família de fontes aberta -sans-bold aqui, para que isso realmente se destaque e seja mais fácil 76 00:06:55,670 --> 00:07:02,930 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 77 00:07:02,930 --> 00:07:04,640 ao redor do texto. 78 00:07:04,640 --> 00:07:10,490 Agora, além disso, também quero garantir que o texto esteja centralizado, para que, se houver uma quebra 79 00:07:10,490 --> 00:07:17,090 de linha, ele esteja centralizado no meio e não recomeçarmos na borda esquerda, e isso agora possa ser alcançado 80 00:07:17,090 --> 00:07:19,010 com uma propriedade de 81 00:07:19,010 --> 00:07:21,760 estilo especial que você pode adicionar aos componentes 82 00:07:21,790 --> 00:07:24,770 de texto e essa é a propriedade alinhar texto. 83 00:07:25,070 --> 00:07:29,210 O problema é que não quero usar isso no texto destacado, quero usá-lo 84 00:07:29,210 --> 00:07:34,990 no texto geral do corpo e, portanto, precisamos adicionar um estilo aqui, talvez o texto resultante seja um 85 00:07:35,000 --> 00:07:38,460 nome adequado aqui, pois esse é o nosso texto geral e, 86 00:07:38,660 --> 00:07:40,760 em seguida, aqui podemos apenas adicionar 87 00:07:44,450 --> 00:07:45,400 o texto 88 00:07:45,410 --> 00:07:49,150 resultante e, nesse texto, definir o alinhamento do texto para o centro. 89 00:07:49,220 --> 00:07:56,570 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, 90 00:07:56,630 --> 00:08:02,660 o suporte de estilo que poderemos adicionar a ele. No texto do corpo, o único estilo definido para o 91 00:08:02,660 --> 00:08:04,660 texto é o estilo definido internamente. 92 00:08:04,670 --> 00:08:09,080 Agora, aprendemos como mudar isso, no entanto, simplesmente passamos um objeto aqui 93 00:08:09,080 --> 00:08:16,170 para estilizar, pegamos todas as nossas propriedades de estilo personalizadas desse arquivo e as distribuímos nesse objeto e mesclamos isso 94 00:08:16,170 --> 00:08:20,670 com o que estivermos usando no estilo props usando o operador spread 95 00:08:20,670 --> 00:08:22,930 aqui também. E com isso, 96 00:08:22,940 --> 00:08:28,370 agora, se salvarmos isso, vemos que agora está bem centralizado e isso certamente é um pouco mais agradável de ler 97 00:08:28,550 --> 00:08:30,490 do que era antes de eu dizer. 98 00:08:30,680 --> 00:08:37,070 Agora, com isso, estamos quase terminando de modelar esse texto, a última coisa que acho legal aqui é que, 99 00:08:37,070 --> 00:08:41,490 se no texto resultante, também aumentamos um pouco o tamanho da fonte. 100 00:08:41,570 --> 00:08:47,990 Portanto, se definirmos o tamanho da fonte aqui como 20, talvez, muito grande e no contêiner 101 00:08:47,990 --> 00:08:55,700 de resultados, também quero ter uma margem vertical de 15, talvez, para ter algum espaçamento na parte superior e inferior 102 00:08:55,700 --> 00:08:57,180 do texto também. 103 00:08:57,320 --> 00:09:02,240 E agora, com isso, temos uma tela de game over que, na minha opinião, não parece muito ruim e 104 00:09:02,240 --> 00:09:07,520 você aprendeu muito sobre como o texto funciona, para que você possa trabalhar com o componente de texto no React Native.