1
00:00:02,320 --> 00:00:08,220
Quindi ora con quell'immagine aggiunta e ora che stiamo già lavorando al gioco sullo schermo qui,

2
00:00:08,230 --> 00:00:11,280
mettiamo a punto questo testo che vediamo

3
00:00:11,280 --> 00:00:15,640
qui in basso, rendiamolo un po 'più bello, un po' più

4
00:00:15,760 --> 00:00:21,400
bello e inoltre prima Lo faccio, in realtà tornerò dall'uso dell'immagine di rete all'immagine locale,

5
00:00:21,400 --> 00:00:24,850
ma ovviamente dipende da te, cosa preferisci lì.

6
00:00:24,850 --> 00:00:29,890
Quindi voglio lavorare sul testo qui e invece di avere questo tipo di testo tabulare qui

7
00:00:29,930 --> 00:00:32,560
che fornisce solo alcune informazioni in modo noioso,

8
00:00:32,560 --> 00:00:37,460
perché non lo presentiamo in un'attesa migliore? In dettaglio, penso che sarebbe meglio

9
00:00:37,600 --> 00:00:43,030
se avessimo un testo leggibile dall'uomo qui, quindi una vera frase che possiamo leggere.

10
00:00:43,400 --> 00:00:52,720
Quindi lì potremmo dire che il tuo telefono ha bisogno, e quindi qui abbiamo il numero di round, round per indovinare il numero e

11
00:00:52,800 --> 00:00:55,140
che qui inserire il numero.

12
00:00:55,240 --> 00:00:59,810
Quindi il numero ovviamente è il numero utente degli oggetti di scena e, di nuovo, puoi sbarazzarti

13
00:00:59,950 --> 00:01:05,260
di questa linea ora, ma non voglio solo generare un numero utente di oggetti di scena come questo, invece voglio evidenziarlo,

14
00:01:05,260 --> 00:01:11,680
voglio dargli un colore speciale che è diverso dall'altro colore qui e lo stesso qui per i round, quindi il numero di valore dei round

15
00:01:11,690 --> 00:01:19,480
degli oggetti di scena, sarebbe bello se anche questo fosse colorato in modo diverso. Ora, per colorarlo in modo diverso, possiamo

16
00:01:19,480 --> 00:01:28,150
effettivamente inserirlo in un altro nodo di testo qui. Quindi puoi avere nodi di testo, componenti di

17
00:01:28,150 --> 00:01:32,920
testo all'interno del testo, all'interno di altri componenti di testo,

18
00:01:32,920 --> 00:01:36,820
in modo che sia possibile, proprio così.

19
00:01:36,820 --> 00:01:38,970
Ora è molto importante da capire,

20
00:01:38,970 --> 00:01:45,790
puoi annidare componenti di testo in altri componenti di testo e tenere presente che il testo del corpo alla fine è solo un

21
00:01:45,790 --> 00:01:51,080
componente di testo, il corpo del testo è un componente che restituisce semplicemente il componente di testo

22
00:01:51,160 --> 00:01:57,100
incorporato, quindi tutto ciò che inserire tra il testo del corpo è lo stesso che se lo inseressimo tra i

23
00:01:57,100 --> 00:02:03,430
componenti di testo incorporati e quindi possiamo avere del testo nidificato lì dentro e in teoria possiamo anche avere delle viste

24
00:02:03,430 --> 00:02:08,800
nidificate lì dentro ma ci sono alcune avvertenze a riguardo e quindi se tu non hai assolutamente

25
00:02:08,800 --> 00:02:14,370
una forte ragione per cui avresti bisogno di una vista lì dentro, non dovresti davvero annidare le viste

26
00:02:14,370 --> 00:02:20,020
nel testo e raramente c'è un motivo per farlo. Il testo all'interno del testo può tuttavia avere molto

27
00:02:20,020 --> 00:02:25,310
senso perché consente di modellare parti di un testo in modo diverso rispetto al resto del testo.

28
00:02:25,360 --> 00:02:32,970
Quindi qui ad esempio, voglio aggiungere stile con gli stili. evidenziare e lo stesso qui per il secondo testo per

29
00:02:33,210 --> 00:02:40,170
evidenziare questa parte del testo e ora ovviamente possiamo aggiungere l'evidenziazione laggiù nel nostro foglio di stile nel gioco

30
00:02:40,170 --> 00:02:48,510
sullo schermo, evidenziare e lì ad esempio dare a questo un colore dove usiamo i colori e per questo, abbiamo bisogno di

31
00:02:48,530 --> 00:02:55,010
aggiungere l'importazione in cui importiamo i colori da costanti / Colori e quindi forse usiamo il nostro

32
00:02:55,010 --> 00:03:02,420
colore primario lì, quindi Colori. primario. Se lo facciamo, quello che vedrai ora è che questo è evidenziato.

33
00:03:03,440 --> 00:03:09,350
Ora anche qualcosa di interessante, se vado temporaneamente al testo del corpo e lo cambio per aprire

34
00:03:09,350 --> 00:03:10,210
sans grassetto

35
00:03:10,490 --> 00:03:17,150
qui, quindi uso la versione in grassetto, vedrai che anche quel testo evidenziato è ancora in grassetto, potrebbe essere

36
00:03:17,150 --> 00:03:23,570
un po 'difficile da vedere ma questo è in realtà audace ed è molto interessante perché prima nel

37
00:03:23,870 --> 00:03:30,860
corso, ho detto che i tuoi stili non avrebbero ereditato, quindi se tu, ad esempio nel gioco sullo schermo, imposta

38
00:03:30,860 --> 00:03:39,170
una famiglia di caratteri qui sullo stile del tuo schermo a cui è applicato la vista che avvolge tutto, quella famiglia di caratteri non

39
00:03:39,470 --> 00:03:42,970
sarebbe passata ai componenti nidificati all'interno di quella vista.

40
00:03:42,980 --> 00:03:48,490
Quindi, solo perché hai impostato uno stile qui in questa vista non significa che tutte le altre viste lì dentro o tutti gli

41
00:03:48,490 --> 00:03:54,080
altri testi lì dentro, qualunque esso sia, ottengano gli stessi stili. Gli stili applicati a un componente vengono

42
00:03:54,080 --> 00:04:00,780
sempre applicati solo a quel componente e non ai componenti nidificati, ma è diverso per il testo.

43
00:04:00,780 --> 00:04:09,050
Lì, questo testo qui, il testo evidenziato che è nidificato all'interno del testo del corpo ottiene anche questa famiglia audace se lo cambiamo sul testo del

44
00:04:09,260 --> 00:04:10,160
corpo e

45
00:04:10,250 --> 00:04:16,550
questa è semplicemente una differenza importante che ha React Native. Per i componenti di testo, se

46
00:04:16,580 --> 00:04:17,720
aggiungi

47
00:04:17,720 --> 00:04:23,900
lo stile lì, lo stile viene passato ai componenti di testo nidificati,

48
00:04:23,900 --> 00:04:29,750
questa è un'eccezione di React Native. Il testo all'interno del testo riceve lo

49
00:04:29,750 --> 00:04:37,610
stile definito sul testo esterno, quindi qualsiasi stile impostato sul testo del corpo qui viene automaticamente ricevuto dai componenti di testo nidificati.

50
00:04:37,680 --> 00:04:43,800
C'è un ulteriore comportamento importante riguardo al componente di testo in React Native e cioè che

51
00:04:43,800 --> 00:04:47,370
non sta usando flexbox. La vista usa flexbox,

52
00:04:47,370 --> 00:04:52,110
il componente testo ovviamente non lo fa e ho già detto questo, che

53
00:04:52,320 --> 00:05:00,180
il componente vista usa flexbox non testo o altri componenti ma il testo usa il proprio sistema di posizionamento in cui si

54
00:05:00,210 --> 00:05:05,580
avvolge automaticamente in una nuova riga se non lo fa Per adattarsi a una riga

55
00:05:05,580 --> 00:05:12,810
e per dimostrarlo, potremmo andare qui al gioco sullo schermo e avvolgere tutto il testo qui in basso in un'altra vista,

56
00:05:12,810 --> 00:05:21,180
quindi prendi quel corpo del testo e aggiungilo qui in questa vista e lì, aggiungi uno stile diciamo di chiamarlo come risultato, qualunque cosa

57
00:05:21,210 --> 00:05:28,080
tu voglia nominare questo o il contenitore dei risultati sia più in linea con gli altri nomi di stile.

58
00:05:28,170 --> 00:05:30,410
Quindi il contenitore dei risultati viene

59
00:05:30,570 --> 00:05:38,300
aggiunto alla vista e ora se lo aggiungo qui, ovunque qui nel mio foglio di stile e lo dò una larghezza di diciamo l'80%, il che

60
00:05:38,550 --> 00:05:42,420
ha senso in modo che il testo abbia un po 'più di distanza

61
00:05:42,480 --> 00:05:49,980
a sinistra e a destra o in alternativa aggiungo un margine orizzontale di diciamo 20 per avere una spaziatura a destra e a sinistra attorno

62
00:05:49,980 --> 00:05:55,980
al contenitore, quindi vedi che il testo è effettivamente racchiuso in una nuova riga e questo è anche un comportamento

63
00:05:55,980 --> 00:05:58,410
predefinito del componente di testo in React Native.

64
00:05:58,410 --> 00:06:05,700
Non solo analizza gli stili fino al testo nidificato, ma ha anche un proprio sistema di posizionamento o un proprio sistema

65
00:06:05,700 --> 00:06:10,950
di layout in cui il testo si avvolge automaticamente in una nuova riga se non

66
00:06:11,040 --> 00:06:16,830
si adatta alla stessa linea e che ovviamente rende molto di senso, in genere è quello che

67
00:06:17,070 --> 00:06:24,920
vuoi sul tuo testo, vuoi che si avvolga in nuove righe. Ora con ciò, ripristinerò questa impostazione sul corpo del testo, in

68
00:06:24,920 --> 00:06:25,880
realtà non

69
00:06:25,880 --> 00:06:28,190
userò open-sans-bold lì, userò solo open

70
00:06:28,310 --> 00:06:34,530
sans ma volevo mostrare questa cosa di eredità di stile e anche ovviamente in generale ti permetto sapere

71
00:06:34,580 --> 00:06:38,960
come si comporta il testo riguardo al modo in cui è strutturato.

72
00:06:38,960 --> 00:06:41,450
Tutto ciò che viene detto sul testo, non

73
00:06:41,480 --> 00:06:43,730
abbiamo ancora finito, non penso che sia

74
00:06:43,760 --> 00:06:49,860
così bello, invece sul gioco sullo schermo, questo testo evidenziato potrebbe essere in grassetto, quindi userò una famiglia di

75
00:06:50,100 --> 00:06:55,400
caratteri di open -sans-bold qui in modo che questo si distingua davvero ed è più facile da

76
00:06:55,670 --> 00:07:02,930
vedere e inoltre, in realtà aggiungerò anche un margine orizzontale di 30 qui per avere un po 'più di spazio da sinistra a

77
00:07:02,930 --> 00:07:04,640
destra attorno al testo.

78
00:07:04,640 --> 00:07:10,490
Inoltre, voglio anche assicurarmi che il testo sia centrato, quindi se abbiamo un'interruzione di riga, è

79
00:07:10,490 --> 00:07:17,090
tutto centrato nel mezzo e non ricominciamo dal bordo sinistro e questo ora può essere ottenuto con una

80
00:07:17,090 --> 00:07:19,010
proprietà di stile speciale

81
00:07:19,010 --> 00:07:21,760
che puoi aggiungere ai componenti di testo e

82
00:07:21,790 --> 00:07:24,770
questa è la proprietà di allineamento del testo.

83
00:07:25,070 --> 00:07:29,210
Il fatto è che non voglio usarlo sul testo in evidenza, voglio usarlo

84
00:07:29,210 --> 00:07:34,990
sul testo del corpo generale e quindi, dobbiamo aggiungere uno stile qui, forse il risultato è un nome

85
00:07:35,000 --> 00:07:38,460
adatto qui poiché questo è il nostro testo generale e quindi

86
00:07:38,660 --> 00:07:40,760
qui possiamo solo aggiungere il testo

87
00:07:44,450 --> 00:07:45,400
del risultato

88
00:07:45,410 --> 00:07:49,150
e su quel testo del risultato, impostare l'allineamento del testo al centro.

89
00:07:49,220 --> 00:07:56,570
Tuttavia, se lo salvo, non ha alcun effetto perché il testo del nostro corpo non è configurato per prendere stile, tenendo

90
00:07:56,630 --> 00:08:02,660
conto dello stile che potremmo aggiungere ad esso. Nel corpo del testo, l'unico stile impostato sul testo

91
00:08:02,660 --> 00:08:04,660
è lo stile definito internamente.

92
00:08:04,670 --> 00:08:09,080
Ora abbiamo imparato come cambiarlo, ma semplicemente passiamo un oggetto qui allo

93
00:08:09,080 --> 00:08:16,170
stile, prendiamo tutte le nostre proprietà di stile personalizzate da questo file e li distribuiamo in questo oggetto e lo uniamo

94
00:08:16,170 --> 00:08:20,670
a quello che stiamo ottenendo sullo stile degli oggetti di scena usando l'operatore

95
00:08:20,670 --> 00:08:22,930
spread anche qui. E con ciò, ora

96
00:08:22,940 --> 00:08:28,370
se lo salviamo, vediamo che questo è ora ben centrato e questo è sicuramente un po 'più bello da leggere

97
00:08:28,550 --> 00:08:30,490
di quanto non fosse prima di dire.

98
00:08:30,680 --> 00:08:37,070
Ora, con quello, abbiamo quasi finito con lo stile di questo testo, l'ultima cosa che penso sia bella qui è che

99
00:08:37,070 --> 00:08:41,490
se sul testo del risultato, aumentiamo anche un po 'la dimensione del carattere.

100
00:08:41,570 --> 00:08:47,990
Quindi, se impostiamo qui la dimensione del carattere su 20 forse, così grande e sul

101
00:08:47,990 --> 00:08:55,700
contenitore dei risultati, voglio anche avere un margine verticale di 15 forse, per avere anche una spaziatura sopra e

102
00:08:55,700 --> 00:08:57,180
sotto il testo.

103
00:08:57,320 --> 00:09:02,240
E ora con questo, abbiamo un gioco sullo schermo che secondo me non sembra troppo male e

104
00:09:02,240 --> 00:09:07,520
hai imparato molto su come funziona il testo, quindi come puoi lavorare con la componente di testo in React Native.