1
00:00:02,210 --> 00:00:07,310
Ora voglio anche usare questa famiglia di caratteri per il titolo dell'intestazione.

2
00:00:07,310 --> 00:00:10,990
Quindi qui nel mio componente dell'intestazione, sul titolo

3
00:00:11,000 --> 00:00:18,560
dell'intestazione, voglio anche impostare una famiglia di caratteri su open-sans-bold in modo che lo usiamo anche lì e per

4
00:00:20,300 --> 00:00:27,110
tutto il resto del testo in questa applicazione, voglio effettivamente usare il mio open font sans.

5
00:00:27,440 --> 00:00:35,480
Quindi, ad esempio, nei giochi di avvio verdi qui, abbiamo il nostro testo, selezioniamo un numero e per usare il

6
00:00:35,870 --> 00:00:45,080
normale carattere sans aperto, possiamo ovviamente assegnare uno stile lì e quindi usare il testo degli stili per esempio e aggiungere questo stile di

7
00:00:45,350 --> 00:00:55,900
testo qui al in basso e quindi utilizzare la famiglia di caratteri, open-sans. Ora funziona, ma ovviamente ha un aspetto

8
00:00:55,900 --> 00:00:57,450
negativo.

9
00:00:57,700 --> 00:01:04,810
Il rovescio della medaglia è che ora è necessario aggiungere manualmente questa famiglia di caratteri a qualsiasi testo nella propria

10
00:01:04,810 --> 00:01:10,980
app in cui si desidera utilizzarlo e è necessario aggiungerlo direttamente ai componenti di testo, non è

11
00:01:11,140 --> 00:01:18,880
possibile aggiungerlo a una vista e, ad esempio, impostare questo sullo schermo qui e fare affidamento sul fatto che viene trasmesso a

12
00:01:18,880 --> 00:01:21,010
testi nidificati, purtroppo non funziona.

13
00:01:21,040 --> 00:01:28,120
Quindi, se andassi allo schermo qui e imposti la famiglia di caratteri su open-sans-bold in modo che possiamo facilmente vedere se funziona o meno,

14
00:01:28,120 --> 00:01:32,340
vedi chiaramente che non è in grassetto, seleziona un numero non è in grassetto.

15
00:01:32,530 --> 00:01:38,250
Quindi passarlo in questo modo, come funziona nei CSS, non funziona perché non è CSS, è

16
00:01:38,290 --> 00:01:45,130
Javascript e ciò che si applica su un oggetto viene applicato solo sull'elemento, sul componente a cui è

17
00:01:45,190 --> 00:01:47,470
collegato questo oggetto di stile.

18
00:01:47,470 --> 00:01:52,930
Quindi dovremmo dare uno stile a questo testo individualmente ma ancora, ricreare lo stile più e più volte in

19
00:01:52,930 --> 00:01:56,760
tutti i diversi posti potrebbe non essere quello che vuoi fare alla fine.

20
00:01:57,600 --> 00:02:01,680
Esistono due soluzioni alternative o soluzioni alternative che sembrano sempre un po

21
00:02:01,680 --> 00:02:05,440
'sporche, due modi per gestirle in un modo più elegante.

22
00:02:05,460 --> 00:02:12,210
Uno è che crei un componente separato, forse un componente di testo del corpo o solo un componente di

23
00:02:12,210 --> 00:02:13,920
testo, qualunque cosa tu

24
00:02:13,920 --> 00:02:19,040
voglia nominarlo e io lo chiamerò BodyText. js e sarà un componente molto semplice,

25
00:02:19,040 --> 00:02:27,360
ho appena importato React da React e ho importato testo e foglio di stile da React Native qui e poi il

26
00:02:30,250 --> 00:02:39,730
componente body text qui ottiene oggetti di scena e semplicemente restituisce il mio componente di testo qui dove ho prodotto oggetti di scena tra

27
00:02:39,730 --> 00:02:41,650
i tag di testo

28
00:02:41,650 --> 00:02:48,430
in modo da poter passare il contenuto al testo del corpo passandolo tra il tag di testo

29
00:02:48,430 --> 00:02:52,500
del corpo di apertura e chiusura quando utilizziamo questo componente.

30
00:02:52,510 --> 00:02:56,570
Quindi qui ho i miei stili e lì uso il foglio di stile. creo e, naturalmente, esporto questo componente

31
00:02:56,950 --> 00:03:01,390
in questo modo e ora qui in questo foglio di stile, ho semplicemente

32
00:03:01,390 --> 00:03:07,370
impostato uno stile che applico qui a questo testo, il corpo degli stili o come volete chiamarlo, ho

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

34
00:03:09,820 --> 00:03:12,680
stile del corpo qui e l'unico stile che ho

35
00:03:12,910 --> 00:03:19,060
set è la famiglia di caratteri open sans e userò grassetto per ora in modo che possiamo vedere

36
00:03:19,060 --> 00:03:20,110
che questo ha

37
00:03:20,170 --> 00:03:25,890
davvero un effetto prima di cambiarlo in un po 'più difficile da vedere, open sans, quindi open-sans-bold

38
00:03:25,900 --> 00:03:31,900
e ora questo è un componente molto semplice, solo un involucro sottile attorno al testo normale ma un

39
00:03:31,960 --> 00:03:34,360
involucro sottile che imposta sempre questa famiglia

40
00:03:34,420 --> 00:03:39,640
di caratteri e questo significa che ogni volta che vogliamo avere del testo che utilizza

41
00:03:39,640 --> 00:03:46,780
questa unica famiglia, forse in tutti i punti dell'app, anziché utilizzare il normale componente di testo di React Native, usiamo solo il

42
00:03:46,780 --> 00:03:52,920
componente di testo del corpo che ho appena creato. Quindi posso importare il testo del corpo

43
00:03:53,890 --> 00:04:01,630
dai componenti BodyText, importando quel componente e ora posso semplicemente sostituire il componente del testo qui con il testo del corpo

44
00:04:01,630 --> 00:04:06,830
e se lo facciamo e lo salviamo, ovviamente vediamo che ora questo sarà in

45
00:04:07,090 --> 00:04:12,640
grassetto, bene se io l'avrei usato sul testo giusto, questo è ovviamente il testo selezionato

46
00:04:12,640 --> 00:04:17,670
dall'utente, va bene anche lì ma voglio andare qui per selezionare il numero.

47
00:04:17,740 --> 00:04:23,800
Quindi, se lo uso lì, il testo del corpo, avvolgo questo testo, vedi ora che è in grassetto e ora possiamo anche tornare

48
00:04:23,800 --> 00:04:30,850
indietro e dare al nostro testo del corpo l'aspetto di sans open realmente previsto che non è ancora il carattere predefinito ma che può " si vede

49
00:04:31,240 --> 00:04:33,370
immediatamente che si tratta di un carattere diverso.

50
00:04:33,400 --> 00:04:40,240
Quindi questa è l'opzione uno di passare lo stile del testo in giro o una famiglia di caratteri in giro, devi semplicemente

51
00:04:40,240 --> 00:04:45,250
creare il tuo componente di testo che ha sempre questa famiglia di caratteri e se hai

52
00:04:45,250 --> 00:04:49,670
più famiglie di caratteri diverse, come un titolo e un'intestazione, crei componenti separati.

53
00:04:49,790 --> 00:04:55,960
Ad esempio qui, abbiamo un titolo, beh, forse vogliamo usarlo anche in altre parti dell'app. Quindi possiamo

54
00:04:55,960 --> 00:05:02,500
aggiungere un TitleText. file js che è fondamentalmente quello che abbiamo nel corpo

55
00:05:02,500 --> 00:05:09,700
del testo, quindi lo copierò e lo sposterò nel testo del titolo e poi qui, abbiamo il nome del testo del titolo

56
00:05:09,910 --> 00:05:12,980
e qui, è il testo del titolo e lì,

57
00:05:12,980 --> 00:05:19,510
usiamo open-sans- grassetto e forse per il titolo, hanno anche una dimensione del carattere di 18 e ora di nuovo,

58
00:05:19,530 --> 00:05:26,010
rinominiamolo a titolo forse, ha più senso per lo stile prop ma ora, di nuovo, abbiamo un involucro molto

59
00:05:26,010 --> 00:05:34,110
sottile attorno al testo e in tutti i luoghi in cui abbiamo bisogno del titolo, come ad esempio nell'intestazione, possiamo sbarazzarci di questa assegnazione di

60
00:05:34,110 --> 00:05:43,340
stile manuale qui nel componente dell'intestazione e invece semplicemente importare il nostro testo del titolo dal componente del testo del titolo e usarlo al posto del testo, sbarazzarci

61
00:05:43,340 --> 00:05:47,450
di questo stile compito qui, così e fai lo stesso nella schermata

62
00:05:47,690 --> 00:05:51,520
di avvio del gioco. Lì, questo testo può

63
00:05:51,560 --> 00:05:54,750
ora essere il titolo, tutto ciò che devo

64
00:05:54,920 --> 00:05:57,860
fare è importarlo. Consentitemi quindi di importare il

65
00:05:57,860 --> 00:06:06,500
testo del titolo dalla cartella dei componenti e lì, dal testo del titolo e ora possiamo riutilizzarlo e proprio come abbiamo fatto prima con la scheda, ad

66
00:06:06,500 --> 00:06:12,980
esempio, se si desidera che questo sia ancora personalizzabile in modo da poter impostare di più su il titolo o

67
00:06:12,980 --> 00:06:18,740
sovrascrivere la dimensione del carattere o aggiungere un margine mentre lo stiamo facendo qui, beh, quello che puoi

68
00:06:18,770 --> 00:06:25,440
sempre fare è ancora possibile aggiungere uno stile qui al testo del titolo, fare riferimento al titolo degli stili, quindi allo

69
00:06:25,530 --> 00:06:32,080
stile del titolo che ho impostato lì nella schermata di avvio del gioco e all'interno del componente del testo del

70
00:06:32,080 --> 00:06:37,270
titolo, devi solo assicurarti di unire questi stili in entrata con gli stili che stai

71
00:06:37,270 --> 00:06:38,240
impostando lì.

72
00:06:38,260 --> 00:06:47,680
Quindi qui lo stile ora punta a un oggetto in cui prendi tutti i valori nei titoli impostati qui e poi li unisci o li

73
00:06:47,680 --> 00:06:53,510
sovrascrivi con tutti i valori impostati in stile oggetti di scena e ora hai un

74
00:06:53,620 --> 00:07:00,190
livello di testo regolabile che imposta questi stili predefiniti ma che può essere ignorato e adattato alle

75
00:07:00,190 --> 00:07:01,990
tue esigenze e quindi

76
00:07:01,990 --> 00:07:06,330
abbiamo lo stesso aspetto di prima ma ora con più usabilità.

77
00:07:06,340 --> 00:07:08,730
Ora di nuovo, questa è l'opzione numero uno.

78
00:07:08,740 --> 00:07:15,700
L'alternativa sarebbe che, ad esempio, nella cartella constants, hai i tuoi stili predefiniti. file js o come si desidera

79
00:07:15,720 --> 00:07:18,070
denominarlo e lì,

80
00:07:18,310 --> 00:07:26,770
si esporta un foglio di stile predefinito e quindi è necessario importarlo, importare il foglio

81
00:07:26,770 --> 00:07:29,530
di stile da React Native.

82
00:07:32,240 --> 00:07:43,590
Si esporta il foglio di stile predefinito. crea un oggetto e lì imposti come il tuo corpo di testo, ad esempio, qualsiasi nome tu

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

84
00:07:45,150 --> 00:07:50,910
qui imposti una famiglia di caratteri, apri sans e forse solo temporaneamente in modo che possiamo vedere se

85
00:07:50,910 --> 00:07:52,520
funziona, dagli un colore rosso.

86
00:07:52,680 --> 00:07:55,480
Ora puoi importarlo in diversi file,

87
00:07:55,680 --> 00:08:07,630
diciamo nella schermata di gioco, lì ora possiamo importare stili predefiniti dalla cartella delle costanti e lì, stili predefiniti e se ora vogliamo quello stile di testo predefinito,

88
00:08:07,670 --> 00:08:11,070
ad esempio qui su indovinare gli avversari, bene

89
00:08:11,090 --> 00:08:12,930
allora tutto ciò che

90
00:08:13,160 --> 00:08:19,340
facciamo è impostare lo stile qui, raggiungere gli stili predefiniti e puntare al testo

91
00:08:19,340 --> 00:08:23,440
del corpo e vedrai se iniziamo un gioco ora, questo

92
00:08:23,450 --> 00:08:25,200
testo sarà rosso.

93
00:08:25,370 --> 00:08:29,360
Quindi, se iniziamo questo gioco, gli avversari suppongono che sia rosso.

94
00:08:29,390 --> 00:08:35,360
Quindi questa sarebbe un'alternativa ad avere componenti separati, che hai semplicemente un foglio di stile gestito a livello

95
00:08:35,360 --> 00:08:38,470
globale che importi in diversi file e ora non

96
00:08:38,680 --> 00:08:44,760
ho davvero bisogno di un corpo di testo rosso ma quello che voglio c'è un titolo e lì ,

97
00:08:44,780 --> 00:08:52,730
Voglio avere una famiglia di caratteri di open-sans-bold e una dimensione del carattere di diciamo 18 e sì, ho lo stesso set nel testo del

98
00:08:52,970 --> 00:08:55,320
titolo, lo sto solo ricreando qui per

99
00:08:55,340 --> 00:09:01,010
mostrare entrambe le alternative perché ora con il titolo impostato in questo modo nel foglio di stile

100
00:09:01,010 --> 00:09:06,920
predefinito, ora possiamo andare alla schermata del gioco e ascoltare non usare il testo del corpo ma usare

101
00:09:07,250 --> 00:09:13,610
il titolo sull'ipotesi dell'avversario e il risultato di ciò è che se ora riavviamo questo gioco, noi avere quel bel

102
00:09:13,610 --> 00:09:14,630
titolo qui.

103
00:09:14,660 --> 00:09:19,670
Quindi questa è una valida alternativa e dipende da te quale preferisci, separa i componenti che

104
00:09:19,670 --> 00:09:25,560
riutilizzi al posto del componente di testo o del componente di testo con uno stile gestito a livello globale

105
00:09:25,760 --> 00:09:31,460
e come nota a margine, in quello stile a gestione globale, sei di Naturalmente non limitato alla gestione di

106
00:09:31,460 --> 00:09:37,490
proprietà specifiche del carattere, qui puoi gestire qualsiasi stile. Pertanto, qualsiasi stile che si desidera condividere tra i componenti può

107
00:09:37,490 --> 00:09:43,940
essere gestito in un foglio di stile così globale, che può essere una configurazione generale del layout, che può essere un colore, che

108
00:09:43,940 --> 00:09:50,900
può essere quello che si desidera, ma in genere è sempre necessario scegliere tra la creazione di componenti separati come componente della carta che è

109
00:09:50,900 --> 00:09:55,790
un involucro attorno alla vista o al testo del corpo o al testo del titolo che sono

110
00:09:55,790 --> 00:10:01,400
anche solo involucri che aggiungono un po 'di stile o gestiscono questo in un foglio di stile globale, dipende da

111
00:10:01,400 --> 00:10:02,780
te ciò che preferisci.

112
00:10:02,780 --> 00:10:07,910
Personalmente ho preferito l'approccio basato sui componenti perché alla fine React è tutto basato sui componenti

113
00:10:08,180 --> 00:10:13,280
e quindi penso che restiamo un po 'più vicini al mondo React predefinito facendolo così, ma

114
00:10:13,310 --> 00:10:20,430
non è nemmeno una decisione in cui devi sempre seguire il percorso A o percorso B, puoi mescolare e abbinare questi concetti, forse

115
00:10:20,540 --> 00:10:25,330
a volte hai qualcosa in cui un componente separato non ha molto senso, gestiscilo in

116
00:10:25,350 --> 00:10:31,070
uno stile globale e in altri casi, forse un componente personalizzato ha più senso che avere una configurazione

117
00:10:31,070 --> 00:10:32,180
di stile globale.