1
00:00:02,210 --> 00:00:07,310
Agora também quero usar essa família de fontes para o título do cabeçalho.

2
00:00:07,310 --> 00:00:10,990
Portanto, aqui no meu componente de cabeçalho, no

3
00:00:11,000 --> 00:00:18,560
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

4
00:00:20,300 --> 00:00:27,110
para todos os outros textos deste aplicativo, na verdade, quero usar meu open sem fonte.

5
00:00:27,440 --> 00:00:35,480
Por exemplo, nos jogos iniciais verdes aqui, temos o nosso texto, selecionamos um número e, para usar a fonte open

6
00:00:35,870 --> 00:00:45,080
sans normal, é claro que podemos atribuir um estilo lá e, em seguida, usar o texto styles por exemplo e adicionar esse estilo

7
00:00:45,350 --> 00:00:55,900
de texto aqui no inferior e use a família de fontes open-sans. Agora isso funciona, mas é claro que tem

8
00:00:55,900 --> 00:00:57,450
uma desvantagem.

9
00:00:57,700 --> 00:01:04,810
A desvantagem é que agora você precisa adicionar manualmente essa família de fontes a qualquer texto em seu

10
00:01:04,810 --> 00:01:10,980
aplicativo em que deseja usá-la e precisa adicioná-lo diretamente nos componentes de texto, não pode adicioná-lo

11
00:01:11,140 --> 00:01:18,880
a uma visualização e, por exemplo, definir isso na tela aqui e conte com o fato de ser transmitido para textos

12
00:01:18,880 --> 00:01:21,010
aninhados, infelizmente isso não funciona.

13
00:01:21,040 --> 00:01:28,120
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ê

14
00:01:28,120 --> 00:01:32,340
vê claramente que não está em negrito, selecione um número que não esteja em negrito.

15
00:01:32,530 --> 00:01:38,250
Passá-lo assim, como se funcionasse em CSS, não funciona porque não é CSS, é Javascript

16
00:01:38,290 --> 00:01:45,130
e o que você aplica em um objeto é aplicado apenas no elemento, no componente ao qual esse

17
00:01:45,190 --> 00:01:47,470
objeto de estilo está anexado.

18
00:01:47,470 --> 00:01:52,930
Portanto, teríamos de estilizar esse texto individualmente, mas novamente, recriar esse estilo repetidamente em todos os lugares

19
00:01:52,930 --> 00:01:56,760
diferentes pode não ser o que você deseja fazer no final.

20
00:01:57,600 --> 00:02:01,680
Existem duas soluções alternativas ou a solução sempre soa um pouco suja,

21
00:02:01,680 --> 00:02:05,440
duas maneiras de lidar com isso de uma maneira mais elegante.

22
00:02:05,460 --> 00:02:12,210
Uma é que você cria um componente separado, talvez um componente de texto do corpo ou apenas um componente

23
00:02:12,210 --> 00:02:13,920
de texto, seja qual

24
00:02:13,920 --> 00:02:19,040
for o nome e o nome de BodyText. js e será um componente muito

25
00:02:19,040 --> 00:02:27,360
simples, eu apenas importo React de React e importo texto e folha de estilo do React Native aqui e, em seguida,

26
00:02:30,250 --> 00:02:39,730
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

27
00:02:39,730 --> 00:02:41,650
tags de texto para

28
00:02:41,650 --> 00:02:48,430
que possamos passar o conteúdo para o texto do corpo passando-o entre a tag de texto

29
00:02:48,430 --> 00:02:52,500
do corpo de abertura e fechamento quando usamos esse componente.

30
00:02:52,510 --> 00:02:56,570
Então aqui eu tenho meus estilos e lá, eu uso o Stylesheet. crie e, claro, eu exporto esse

31
00:02:56,950 --> 00:03:01,390
componente assim e agora aqui nesta folha de estilo, simplesmente defino um estilo

32
00:03:01,390 --> 00:03:07,370
que aplico aqui a este texto, estilos body ou o que você quiser nomeá-lo, tenha o estilo

33
00:03:08,650 --> 00:03:09,590
body

34
00:03:09,820 --> 00:03:12,680
aqui e o estilo I set é a

35
00:03:12,910 --> 00:03:19,060
família de fontes open sans e vou usar negrito por enquanto, para que possamos ver que isso realmente

36
00:03:19,060 --> 00:03:20,110
tem um efeito

37
00:03:20,170 --> 00:03:25,890
antes de alterá-lo para um pouco mais difícil de ver, open sans, open-sans-bold e agora isso é

38
00:03:25,900 --> 00:03:31,900
um componente muito simples, apenas um invólucro fino em torno do texto normal, mas um invólucro fino que

39
00:03:31,960 --> 00:03:34,360
sempre define essa família de fontes

40
00:03:34,420 --> 00:03:39,640
e isso significa que sempre que queremos ter um texto que use essa família, talvez

41
00:03:39,640 --> 00:03:46,780
em todos os lugares do aplicativo, em vez de usar o componente de texto normal do React Native, usamos apenas o

42
00:03:46,780 --> 00:03:52,920
componente de texto do corpo que acabei de criar. Então, eu posso importar o texto do

43
00:03:53,890 --> 00:04:01,630
corpo dos componentes BodyText, importando esse componente e agora posso simplesmente substituir o componente de texto aqui pelo texto do corpo. Se

44
00:04:01,630 --> 00:04:06,830
fizermos isso e salvarmos isso, é claro que veremos que agora isso ficará em

45
00:04:07,090 --> 00:04:12,640
negrito, bem, se eu teria usado no texto certo, é claro que o texto selecionado pelo

46
00:04:12,640 --> 00:04:17,670
usuário, também está bom lá, mas eu quero ir aqui para selecionar o número.

47
00:04:17,740 --> 00:04:23,800
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

48
00:04:23,800 --> 00:04:30,850
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

49
00:04:31,240 --> 00:04:33,370
percebe imediatamente que é uma fonte diferente.

50
00:04:33,400 --> 00:04:40,240
Portanto, essa é uma opção para transmitir estilo de texto ou uma família de fontes, você simplesmente cria seu próprio componente

51
00:04:40,240 --> 00:04:45,250
de texto que sempre possui essa família de fontes e, se você tem várias famílias

52
00:04:45,250 --> 00:04:49,670
de fontes diferentes, como um título e um cabeçalho, cria componentes separados.

53
00:04:49,790 --> 00:04:55,960
Por exemplo, aqui, temos um título, talvez também possamos usá-lo em outras partes do aplicativo. Assim, podemos

54
00:04:55,960 --> 00:05:02,500
adicionar um TitleText. arquivo js, que é basicamente o que temos no corpo

55
00:05:02,500 --> 00:05:09,700
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

56
00:05:09,910 --> 00:05:12,980
título e aqui, é o texto do título e,

57
00:05:12,980 --> 00:05:19,510
usamos open-sans- negrito e talvez para o título, também tenham tamanho de fonte 18 e agora, novamente, vamos renomear para

58
00:05:19,530 --> 00:05:26,010
título, talvez, faça mais sentido para o suporte de estilo, mas agora, novamente, temos um invólucro muito fino ao

59
00:05:26,010 --> 00:05:34,110
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

60
00:05:34,110 --> 00:05:43,340
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

61
00:05:43,340 --> 00:05:47,450
texto, livrar-se desse estilo atribuição aqui, assim e faça o mesmo na

62
00:05:47,690 --> 00:05:51,520
tela inicial do jogo. Agora, esse texto agora

63
00:05:51,560 --> 00:05:54,750
pode ser um título, tudo o que preciso

64
00:05:54,920 --> 00:05:57,860
fazer é importá-lo. Então, deixe-me importar o

65
00:05:57,860 --> 00:06:06,500
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

66
00:06:06,500 --> 00:06:12,980
exemplo, se você quiser que ele ainda seja personalizável para que possamos definir mais o título ou substituir o

67
00:06:12,980 --> 00:06:18,740
tamanho da fonte ou adicionar uma margem, como estamos fazendo aqui, bem, o que você sempre

68
00:06:18,770 --> 00:06:25,440
pode fazer é ainda adicionar estilo aqui ao texto do título, referir-se ao estilo dos títulos e, portanto, ao estilo

69
00:06:25,530 --> 00:06:32,080
do título que tenho configurado lá na tela inicial do jogo e dentro do componente de texto do título,

70
00:06:32,080 --> 00:06:37,270
você só precisa certificar-se de mesclar esses estilos recebidos com os estilos que você está

71
00:06:37,270 --> 00:06:38,240
configurando lá.

72
00:06:38,260 --> 00:06:47,680
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

73
00:06:47,680 --> 00:06:53,510
os substitui por todos os valores configurados no estilo props e agora você tem uma

74
00:06:53,620 --> 00:07:00,190
camada de texto ajustável que define esses estilos padrão mas que pode ser substituído e ajustado às

75
00:07:00,190 --> 00:07:01,990
suas necessidades e, portanto,

76
00:07:01,990 --> 00:07:06,330
temos a mesma aparência de antes, mas agora com mais usabilidade.

77
00:07:06,340 --> 00:07:08,730
Agora, novamente, essa é a opção número um.

78
00:07:08,740 --> 00:07:15,700
A alternativa seria que, por exemplo, na pasta constantes, você tenha seus estilos padrão. arquivo js ou o nome que você

79
00:07:15,720 --> 00:07:18,070
quiser e, nele,

80
00:07:18,310 --> 00:07:26,770
você exporta uma folha de estilo padrão e, portanto, é necessário importá-la, importe a folha

81
00:07:26,770 --> 00:07:29,530
de estilo do React Native.

82
00:07:32,240 --> 00:07:43,590
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

83
00:07:44,070 --> 00:07:45,100
desejar e

84
00:07:45,150 --> 00:07:50,910
aqui define uma família de fontes, abre sans e talvez apenas temporariamente, para que possamos ver se isso

85
00:07:50,910 --> 00:07:52,520
funciona, dê uma cor vermelha.

86
00:07:52,680 --> 00:07:55,480
Agora você pode importar isso para arquivos

87
00:07:55,680 --> 00:08:07,630
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

88
00:08:07,670 --> 00:08:11,070
exemplo, aqui, na opinião dos oponentes, bem, então

89
00:08:11,090 --> 00:08:12,930
tudo o que fazemos

90
00:08:13,160 --> 00:08:19,340
é definir o estilo aqui, acessar os estilos padrão e apontar para o texto do

91
00:08:19,340 --> 00:08:23,440
corpo e você verá se iniciaremos um jogo agora, esse

92
00:08:23,450 --> 00:08:25,200
texto será vermelho.

93
00:08:25,370 --> 00:08:29,360
Então, se começarmos este jogo, os adversários acham que é vermelho.

94
00:08:29,390 --> 00:08:35,360
Portanto, isso seria uma alternativa a componentes separados, que você simplesmente possui uma folha de estilo gerenciada globalmente

95
00:08:35,360 --> 00:08:38,470
que importa em arquivos diferentes e agora não preciso

96
00:08:38,680 --> 00:08:44,760
realmente de um texto do corpo em vermelho, mas o que eu quero é que haja um título ,

97
00:08:44,780 --> 00:08:52,730
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,

98
00:08:52,970 --> 00:08:55,320
apenas a recrio aqui para mostrar as

99
00:08:55,340 --> 00:09:01,010
duas alternativas, porque agora com como o título está sendo configurado assim na folha de estilo padrão,

100
00:09:01,010 --> 00:09:06,920
agora podemos ir para a tela do jogo e ouvir não usar o texto do corpo, mas usar

101
00:09:07,250 --> 00:09:13,610
o título no palpite do oponente e o resultado disso é que, se reiniciarmos agora o jogo, tem esse belo

102
00:09:13,610 --> 00:09:14,630
título aqui.

103
00:09:14,660 --> 00:09:19,670
Portanto, essa é uma alternativa válida e depende de você qual você prefere, separe os

104
00:09:19,670 --> 00:09:25,560
componentes que você reutiliza em vez do componente de texto ou de texto com um estilo gerenciado globalmente

105
00:09:25,760 --> 00:09:31,460
e, como observação lateral, nesse estilo gerenciado globalmente, você é curso não restrito ao gerenciamento de propriedades específicas

106
00:09:31,460 --> 00:09:37,490
da fonte, você pode gerenciar qualquer estilo aqui. Portanto, qualquer estilo que você deseja compartilhar entre os

107
00:09:37,490 --> 00:09:43,940
componentes pode ser gerenciado em uma folha de estilo global, que pode ser configurações gerais de layout, cores, cores que podem ser

108
00:09:43,940 --> 00:09:50,900
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

109
00:09:50,900 --> 00:09:55,790
torno da visualização ou do texto do corpo ou do texto do título, que também são

110
00:09:55,790 --> 00:10:01,400
apenas invólucros que adicionam algum estilo ou gerenciam isso aqui em uma folha de estilo global, é com você

111
00:10:01,400 --> 00:10:02,780
o que você prefere.

112
00:10:02,780 --> 00:10:07,910
Pessoalmente, preferi a abordagem orientada a componentes, porque no final o React é sobre componentes e, portanto,

113
00:10:08,180 --> 00:10:13,280
acho que ficamos um pouco mais próximos do mundo padrão do React, fazendo assim, mas também

114
00:10:13,310 --> 00:10:20,430
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

115
00:10:20,540 --> 00:10:25,330
às vezes tenha algo em que um componente separado não faça muito sentido, gerencie-o em

116
00:10:25,350 --> 00:10:31,070
um estilo global e, em outros casos, talvez um componente personalizado faça mais sentido do que ter uma configuração

117
00:10:31,070 --> 00:10:32,180
de estilo global.