Quindi ora con quell'immagine aggiunta e ora che stiamo già lavorando al gioco sullo schermo qui,
mettiamo a punto questo testo che vediamo
qui in basso, rendiamolo un po 'più bello, un po' più
bello e inoltre prima Lo faccio, in realtà tornerò dall'uso dell'immagine di rete all'immagine locale,
ma ovviamente dipende da te, cosa preferisci lì.
Quindi voglio lavorare sul testo qui e invece di avere questo tipo di testo tabulare qui
che fornisce solo alcune informazioni in modo noioso,
perché non lo presentiamo in un'attesa migliore? In dettaglio, penso che sarebbe meglio
se avessimo un testo leggibile dall'uomo qui, quindi una vera frase che possiamo leggere.
Quindi lì potremmo dire che il tuo telefono ha bisogno, e quindi qui abbiamo il numero di round, round per indovinare il numero e
che qui inserire il numero.
Quindi il numero ovviamente è il numero utente degli oggetti di scena e, di nuovo, puoi sbarazzarti
di questa linea ora, ma non voglio solo generare un numero utente di oggetti di scena come questo, invece voglio evidenziarlo,
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
degli oggetti di scena, sarebbe bello se anche questo fosse colorato in modo diverso. Ora, per colorarlo in modo diverso, possiamo
effettivamente inserirlo in un altro nodo di testo qui. Quindi puoi avere nodi di testo, componenti di
testo all'interno del testo, all'interno di altri componenti di testo,
in modo che sia possibile, proprio così.
Ora è molto importante da capire,
puoi annidare componenti di testo in altri componenti di testo e tenere presente che il testo del corpo alla fine è solo un
componente di testo, il corpo del testo è un componente che restituisce semplicemente il componente di testo
incorporato, quindi tutto ciò che inserire tra il testo del corpo è lo stesso che se lo inseressimo tra i
componenti di testo incorporati e quindi possiamo avere del testo nidificato lì dentro e in teoria possiamo anche avere delle viste
nidificate lì dentro ma ci sono alcune avvertenze a riguardo e quindi se tu non hai assolutamente
una forte ragione per cui avresti bisogno di una vista lì dentro, non dovresti davvero annidare le viste
nel testo e raramente c'è un motivo per farlo. Il testo all'interno del testo può tuttavia avere molto
senso perché consente di modellare parti di un testo in modo diverso rispetto al resto del testo.
Quindi qui ad esempio, voglio aggiungere stile con gli stili. evidenziare e lo stesso qui per il secondo testo per
evidenziare questa parte del testo e ora ovviamente possiamo aggiungere l'evidenziazione laggiù nel nostro foglio di stile nel gioco
sullo schermo, evidenziare e lì ad esempio dare a questo un colore dove usiamo i colori e per questo, abbiamo bisogno di
aggiungere l'importazione in cui importiamo i colori da costanti / Colori e quindi forse usiamo il nostro
colore primario lì, quindi Colori. primario. Se lo facciamo, quello che vedrai ora è che questo è evidenziato.
Ora anche qualcosa di interessante, se vado temporaneamente al testo del corpo e lo cambio per aprire
sans grassetto
qui, quindi uso la versione in grassetto, vedrai che anche quel testo evidenziato è ancora in grassetto, potrebbe essere
un po 'difficile da vedere ma questo è in realtà audace ed è molto interessante perché prima nel
corso, ho detto che i tuoi stili non avrebbero ereditato, quindi se tu, ad esempio nel gioco sullo schermo, imposta
una famiglia di caratteri qui sullo stile del tuo schermo a cui è applicato la vista che avvolge tutto, quella famiglia di caratteri non
sarebbe passata ai componenti nidificati all'interno di quella vista.
Quindi, solo perché hai impostato uno stile qui in questa vista non significa che tutte le altre viste lì dentro o tutti gli
altri testi lì dentro, qualunque esso sia, ottengano gli stessi stili. Gli stili applicati a un componente vengono
sempre applicati solo a quel componente e non ai componenti nidificati, ma è diverso per il testo.
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
corpo e
questa è semplicemente una differenza importante che ha React Native. Per i componenti di testo, se
aggiungi
lo stile lì, lo stile viene passato ai componenti di testo nidificati,
questa è un'eccezione di React Native. Il testo all'interno del testo riceve lo
stile definito sul testo esterno, quindi qualsiasi stile impostato sul testo del corpo qui viene automaticamente ricevuto dai componenti di testo nidificati.
C'è un ulteriore comportamento importante riguardo al componente di testo in React Native e cioè che
non sta usando flexbox. La vista usa flexbox,
il componente testo ovviamente non lo fa e ho già detto questo, che
il componente vista usa flexbox non testo o altri componenti ma il testo usa il proprio sistema di posizionamento in cui si
avvolge automaticamente in una nuova riga se non lo fa Per adattarsi a una riga
e per dimostrarlo, potremmo andare qui al gioco sullo schermo e avvolgere tutto il testo qui in basso in un'altra vista,
quindi prendi quel corpo del testo e aggiungilo qui in questa vista e lì, aggiungi uno stile diciamo di chiamarlo come risultato, qualunque cosa
tu voglia nominare questo o il contenitore dei risultati sia più in linea con gli altri nomi di stile.
Quindi il contenitore dei risultati viene
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
ha senso in modo che il testo abbia un po 'più di distanza
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
al contenitore, quindi vedi che il testo è effettivamente racchiuso in una nuova riga e questo è anche un comportamento
predefinito del componente di testo in React Native.
Non solo analizza gli stili fino al testo nidificato, ma ha anche un proprio sistema di posizionamento o un proprio sistema
di layout in cui il testo si avvolge automaticamente in una nuova riga se non
si adatta alla stessa linea e che ovviamente rende molto di senso, in genere è quello che
vuoi sul tuo testo, vuoi che si avvolga in nuove righe. Ora con ciò, ripristinerò questa impostazione sul corpo del testo, in
realtà non
userò open-sans-bold lì, userò solo open
sans ma volevo mostrare questa cosa di eredità di stile e anche ovviamente in generale ti permetto sapere
come si comporta il testo riguardo al modo in cui è strutturato.
Tutto ciò che viene detto sul testo, non
abbiamo ancora finito, non penso che sia
così bello, invece sul gioco sullo schermo, questo testo evidenziato potrebbe essere in grassetto, quindi userò una famiglia di
caratteri di open -sans-bold qui in modo che questo si distingua davvero ed è più facile da
vedere e inoltre, in realtà aggiungerò anche un margine orizzontale di 30 qui per avere un po 'più di spazio da sinistra a
destra attorno al testo.
Inoltre, voglio anche assicurarmi che il testo sia centrato, quindi se abbiamo un'interruzione di riga, è
tutto centrato nel mezzo e non ricominciamo dal bordo sinistro e questo ora può essere ottenuto con una
proprietà di stile speciale
che puoi aggiungere ai componenti di testo e
questa è la proprietà di allineamento del testo.
Il fatto è che non voglio usarlo sul testo in evidenza, voglio usarlo
sul testo del corpo generale e quindi, dobbiamo aggiungere uno stile qui, forse il risultato è un nome
adatto qui poiché questo è il nostro testo generale e quindi
qui possiamo solo aggiungere il testo
del risultato
e su quel testo del risultato, impostare l'allineamento del testo al centro.
Tuttavia, se lo salvo, non ha alcun effetto perché il testo del nostro corpo non è configurato per prendere stile, tenendo
conto dello stile che potremmo aggiungere ad esso. Nel corpo del testo, l'unico stile impostato sul testo
è lo stile definito internamente.
Ora abbiamo imparato come cambiarlo, ma semplicemente passiamo un oggetto qui allo
stile, prendiamo tutte le nostre proprietà di stile personalizzate da questo file e li distribuiamo in questo oggetto e lo uniamo
a quello che stiamo ottenendo sullo stile degli oggetti di scena usando l'operatore
spread anche qui. E con ciò, ora
se lo salviamo, vediamo che questo è ora ben centrato e questo è sicuramente un po 'più bello da leggere
di quanto non fosse prima di dire.
Ora, con quello, abbiamo quasi finito con lo stile di questo testo, l'ultima cosa che penso sia bella qui è che
se sul testo del risultato, aumentiamo anche un po 'la dimensione del carattere.
Quindi, se impostiamo qui la dimensione del carattere su 20 forse, così grande e sul
contenitore dei risultati, voglio anche avere un margine verticale di 15 forse, per avere anche una spaziatura sopra e
sotto il testo.
E ora con questo, abbiamo un gioco sullo schermo che secondo me non sembra troppo male e
hai imparato molto su come funziona il testo, quindi come puoi lavorare con la componente di testo in React Native.