Ora voglio anche usare questa famiglia di caratteri per il titolo dell'intestazione.
Quindi qui nel mio componente dell'intestazione, sul titolo
dell'intestazione, voglio anche impostare una famiglia di caratteri su open-sans-bold in modo che lo usiamo anche lì e per
tutto il resto del testo in questa applicazione, voglio effettivamente usare il mio open font sans.
Quindi, ad esempio, nei giochi di avvio verdi qui, abbiamo il nostro testo, selezioniamo un numero e per usare il
normale carattere sans aperto, possiamo ovviamente assegnare uno stile lì e quindi usare il testo degli stili per esempio e aggiungere questo stile di
testo qui al in basso e quindi utilizzare la famiglia di caratteri, open-sans. Ora funziona, ma ovviamente ha un aspetto
negativo.
Il rovescio della medaglia è che ora è necessario aggiungere manualmente questa famiglia di caratteri a qualsiasi testo nella propria
app in cui si desidera utilizzarlo e è necessario aggiungerlo direttamente ai componenti di testo, non è
possibile aggiungerlo a una vista e, ad esempio, impostare questo sullo schermo qui e fare affidamento sul fatto che viene trasmesso a
testi nidificati, purtroppo non funziona.
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,
vedi chiaramente che non è in grassetto, seleziona un numero non è in grassetto.
Quindi passarlo in questo modo, come funziona nei CSS, non funziona perché non è CSS, è
Javascript e ciò che si applica su un oggetto viene applicato solo sull'elemento, sul componente a cui è
collegato questo oggetto di stile.
Quindi dovremmo dare uno stile a questo testo individualmente ma ancora, ricreare lo stile più e più volte in
tutti i diversi posti potrebbe non essere quello che vuoi fare alla fine.
Esistono due soluzioni alternative o soluzioni alternative che sembrano sempre un po
'sporche, due modi per gestirle in un modo più elegante.
Uno è che crei un componente separato, forse un componente di testo del corpo o solo un componente di
testo, qualunque cosa tu
voglia nominarlo e io lo chiamerò BodyText. js e sarà un componente molto semplice,
ho appena importato React da React e ho importato testo e foglio di stile da React Native qui e poi il
componente body text qui ottiene oggetti di scena e semplicemente restituisce il mio componente di testo qui dove ho prodotto oggetti di scena tra
i tag di testo
in modo da poter passare il contenuto al testo del corpo passandolo tra il tag di testo
del corpo di apertura e chiusura quando utilizziamo questo componente.
Quindi qui ho i miei stili e lì uso il foglio di stile. creo e, naturalmente, esporto questo componente
in questo modo e ora qui in questo foglio di stile, ho semplicemente
impostato uno stile che applico qui a questo testo, il corpo degli stili o come volete chiamarlo, ho
lo
stile del corpo qui e l'unico stile che ho
set è la famiglia di caratteri open sans e userò grassetto per ora in modo che possiamo vedere
che questo ha
davvero un effetto prima di cambiarlo in un po 'più difficile da vedere, open sans, quindi open-sans-bold
e ora questo è un componente molto semplice, solo un involucro sottile attorno al testo normale ma un
involucro sottile che imposta sempre questa famiglia
di caratteri e questo significa che ogni volta che vogliamo avere del testo che utilizza
questa unica famiglia, forse in tutti i punti dell'app, anziché utilizzare il normale componente di testo di React Native, usiamo solo il
componente di testo del corpo che ho appena creato. Quindi posso importare il testo del corpo
dai componenti BodyText, importando quel componente e ora posso semplicemente sostituire il componente del testo qui con il testo del corpo
e se lo facciamo e lo salviamo, ovviamente vediamo che ora questo sarà in
grassetto, bene se io l'avrei usato sul testo giusto, questo è ovviamente il testo selezionato
dall'utente, va bene anche lì ma voglio andare qui per selezionare il numero.
Quindi, se lo uso lì, il testo del corpo, avvolgo questo testo, vedi ora che è in grassetto e ora possiamo anche tornare
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
immediatamente che si tratta di un carattere diverso.
Quindi questa è l'opzione uno di passare lo stile del testo in giro o una famiglia di caratteri in giro, devi semplicemente
creare il tuo componente di testo che ha sempre questa famiglia di caratteri e se hai
più famiglie di caratteri diverse, come un titolo e un'intestazione, crei componenti separati.
Ad esempio qui, abbiamo un titolo, beh, forse vogliamo usarlo anche in altre parti dell'app. Quindi possiamo
aggiungere un TitleText. file js che è fondamentalmente quello che abbiamo nel corpo
del testo, quindi lo copierò e lo sposterò nel testo del titolo e poi qui, abbiamo il nome del testo del titolo
e qui, è il testo del titolo e lì,
usiamo open-sans- grassetto e forse per il titolo, hanno anche una dimensione del carattere di 18 e ora di nuovo,
rinominiamolo a titolo forse, ha più senso per lo stile prop ma ora, di nuovo, abbiamo un involucro molto
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
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
di questo stile compito qui, così e fai lo stesso nella schermata
di avvio del gioco. Lì, questo testo può
ora essere il titolo, tutto ciò che devo
fare è importarlo. Consentitemi quindi di importare il
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
esempio, se si desidera che questo sia ancora personalizzabile in modo da poter impostare di più su il titolo o
sovrascrivere la dimensione del carattere o aggiungere un margine mentre lo stiamo facendo qui, beh, quello che puoi
sempre fare è ancora possibile aggiungere uno stile qui al testo del titolo, fare riferimento al titolo degli stili, quindi allo
stile del titolo che ho impostato lì nella schermata di avvio del gioco e all'interno del componente del testo del
titolo, devi solo assicurarti di unire questi stili in entrata con gli stili che stai
impostando lì.
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
sovrascrivi con tutti i valori impostati in stile oggetti di scena e ora hai un
livello di testo regolabile che imposta questi stili predefiniti ma che può essere ignorato e adattato alle
tue esigenze e quindi
abbiamo lo stesso aspetto di prima ma ora con più usabilità.
Ora di nuovo, questa è l'opzione numero uno.
L'alternativa sarebbe che, ad esempio, nella cartella constants, hai i tuoi stili predefiniti. file js o come si desidera
denominarlo e lì,
si esporta un foglio di stile predefinito e quindi è necessario importarlo, importare il foglio
di stile da React Native.
Si esporta il foglio di stile predefinito. crea un oggetto e lì imposti come il tuo corpo di testo, ad esempio, qualsiasi nome tu
voglia e
qui imposti una famiglia di caratteri, apri sans e forse solo temporaneamente in modo che possiamo vedere se
funziona, dagli un colore rosso.
Ora puoi importarlo in diversi file,
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,
ad esempio qui su indovinare gli avversari, bene
allora tutto ciò che
facciamo è impostare lo stile qui, raggiungere gli stili predefiniti e puntare al testo
del corpo e vedrai se iniziamo un gioco ora, questo
testo sarà rosso.
Quindi, se iniziamo questo gioco, gli avversari suppongono che sia rosso.
Quindi questa sarebbe un'alternativa ad avere componenti separati, che hai semplicemente un foglio di stile gestito a livello
globale che importi in diversi file e ora non
ho davvero bisogno di un corpo di testo rosso ma quello che voglio c'è un titolo e lì ,
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
titolo, lo sto solo ricreando qui per
mostrare entrambe le alternative perché ora con il titolo impostato in questo modo nel foglio di stile
predefinito, ora possiamo andare alla schermata del gioco e ascoltare non usare il testo del corpo ma usare
il titolo sull'ipotesi dell'avversario e il risultato di ciò è che se ora riavviamo questo gioco, noi avere quel bel
titolo qui.
Quindi questa è una valida alternativa e dipende da te quale preferisci, separa i componenti che
riutilizzi al posto del componente di testo o del componente di testo con uno stile gestito a livello globale
e come nota a margine, in quello stile a gestione globale, sei di Naturalmente non limitato alla gestione di
proprietà specifiche del carattere, qui puoi gestire qualsiasi stile. Pertanto, qualsiasi stile che si desidera condividere tra i componenti può
essere gestito in un foglio di stile così globale, che può essere una configurazione generale del layout, che può essere un colore, che
può essere quello che si desidera, ma in genere è sempre necessario scegliere tra la creazione di componenti separati come componente della carta che è
un involucro attorno alla vista o al testo del corpo o al testo del titolo che sono
anche solo involucri che aggiungono un po 'di stile o gestiscono questo in un foglio di stile globale, dipende da
te ciò che preferisci.
Personalmente ho preferito l'approccio basato sui componenti perché alla fine React è tutto basato sui componenti
e quindi penso che restiamo un po 'più vicini al mondo React predefinito facendolo così, ma
non è nemmeno una decisione in cui devi sempre seguire il percorso A o percorso B, puoi mescolare e abbinare questi concetti, forse
a volte hai qualcosa in cui un componente separato non ha molto senso, gestiscilo in
uno stile globale e in altri casi, forse un componente personalizzato ha più senso che avere una configurazione
di stile globale.