Quindi ora che la logica generale del gioco funziona, concentriamoci di più sul finire quello stile e anche
sull'aggiunta dei nostri caratteri personalizzati e una piccola immagine sul gioco sullo schermo perché lavorare
con le immagini e lavorare con i caratteri personalizzati è una cosa tipica dei moderni sviluppo di app, ovviamente,
raramente si desidera attenersi ai caratteri di sistema predefiniti e raramente si dispone di un'app senza immagini.
Quindi, iniziamo con caratteri personalizzati e in una mostra React Native, l'aggiunta di caratteri è super banale.
Nella cartella del progetto, nella
cartella delle risorse, creiamo una cartella di caratteri. Puoi archiviarlo ovunque però, ma mi piace
tenerlo nella cartella delle risorse per mantenere le mie risorse come caratteri e immagini organizzate.
Quindi qui nella cartella dei caratteri, non sorprende gestire i miei caratteri e per questo,
in allegato trovi un file zip con due caratteri che puoi semplicemente estrarre e
quindi trascinare e rilasciare qui, questo è OpenSans-Bold e
OpenSans-Regular, quindi questi due caratteri sono allegati a questo video in un file zip, estratti e trascinarli nella
cartella dei caratteri.
Ora con ciò, questi caratteri sono generalmente disponibili ma per usarli, è ancora necessario configurarne di più.
Devi andare alla tua app. js file e fondamentalmente istruire React Native ed expo a caricare
questi font, così da usarli. Per quello nell'app. js file e sto usando l'app. js file perché questo è
il primo file che viene caricato o che viene eseguito, per così dire quando si
avvia l'app e si desidera caricare i caratteri all'avvio dell'app, è necessario aggiungere un'importazione e l'importazione è che si importa
tutto come carattere, anche se il nome qui dipende da te, ma in genere si utilizza qui il carattere, da expo-font.
Quindi expo-font è un pacchetto che ti offre utilità per i font, quindi utility che ti consentono di caricare i font e
importare tutto da quel pacchetto e raggrupparlo insieme in questo oggetto font, ecco cosa
stiamo facendo qui. Ora per caricare
i caratteri, aggiungerò una nuova funzione al di fuori del componente funzionale perché non è
necessario ricreare questa funzione per ogni ciclo di rendering del componente.
Ora lo chiamerò
fetch font,
il nome dipende da te
e in questa funzione chiamerò font. loadAsync.
Ora questa è una funzione che o un metodo sul pacchetto di caratteri che stiamo importando
qui che ti consente di caricare caratteri e ciò che passi per caricare asincrono è un oggetto in cui dici a Expo e quindi Reagisci nativo
su tutti i caratteri che vuoi caricare. Puoi farlo usando una chiave in cui scegli
un nome a tua scelta, come open-sans e in seguito sarai in grado di usare questi caratteri con questi
nomi, quindi qui open sans perché il mio carattere si chiama open sans.
Quindi qui è open sans e quindi aggiungi la richiesta, questa
è una funzione linguistica che Javascript offre dove indichi il percorso in cui è memorizzato questo font.
Questo è un
percorso relativo, quindi qui indico la cartella delle
risorse, la cartella dei caratteri e poi è OpenSans-Bold, non grassetto ma normale. ttf file e ora aggiungerò un secondo
elemento qui a questo oggetto che passo per caricare asincrono e che potrebbe essere open-sans-bold.
Ora questi nomi sono totalmente a te e lì voglio caricare la versione in grassetto.
Quindi, alla fine, stiamo dicendo a React Native dove vivono i nostri caratteri, dove vivono questi file di caratteri e a quali nomi vogliamo
mapparli e in seguito possiamo usare questi nomi per assegnare questi caratteri al testo. Ora il caricamento asincrono in realtà restituisce una promessa, il che significa che
ciò richiederà un po 'più di tempo, non molto lungo ma non li caricherà istantaneamente e restituirò questa promessa qui
all'interno dei caratteri di recupero in modo che ogni volta che chiamiamo caratteri di recupero, possiamo aspettare
per questa promessa da risolvere prima di continuare. Ora, però, dove
vogliamo recuperare i nostri caratteri?
Bene, potremmo caricare manualmente i nostri caratteri qui, ad esempio potremmo chiamare i caratteri di recupero come questo e andare avanti e recuperare i nostri
caratteri, ma il problema
è che continueremmo a renderlo e alla fine renderemmo il nostro contenuto e se dovunque nel contenuto, usiamo il testo che
tenta di usare un carattere del genere, se il carattere non è stato ancora
caricato e, come ho già detto, ci vorranno solo un paio di millisecondi ma comunque per il primo ciclo di
rendering, il carattere potrebbe non essere stato caricato, quindi avremmo un errore. Quindi non è consigliabile caricare i
nostri caratteri in questo modo, molto probabilmente non funzionerà.
Invece c'è un componente speciale che puoi usare, ti aiuta a caricare i tuoi caratteri. Si importa questo componente
da Expo e il nome di quel componente è AppLoading.
Ora che è un componente che prolungherà sostanzialmente la schermata di caricamento predefinita, gli utenti della schermata iniziale
vedono comunque all'avvio dell'app, prolungherà questa schermata per rimanere attiva fino a quando non viene eseguita una determinata attività,
ad esempio
fino a quando non viene recuperato il carattere fatto.
Quindi AppLoading è, nel componente app, dobbiamo solo assicurarci che
ora rendiamo questo componente invece del nostro contenuto reale fintanto che non abbiamo ancora
caricato i nostri caratteri
o finché non abbiamo finito di caricare qualunque cosa volevamo caricare.
Ora il bello è che possiamo usare lo stato per questo e iniziare con un
valore iniziale di false perché lo stato che voglio gestire qui è caricato dati o come vuoi chiamarlo e impostare i dati caricati.
Ora qui, voglio verificare se i dati caricati non sono veri, quindi il punto esclamativo, quindi so che i dati non sono stati
ancora caricati e questo è il caso inizialmente e in questo caso, non continuerò
nemmeno
con la mia altra logica , invece per questo componente funzionale, restituirò immediatamente il componente AppLoading come contenuto dell'app essenzialmente perché non
voglio visualizzare altri contenuti se stiamo ancora caricando i nostri dati.
Ora AppLoading è un componente proveniente da Expo che prende un inizio asincrono prop in cui puntiamo all'operazione che vogliamo iniziare quando viene renderizzata
per la prima volta e questa è ovviamente la nostra funzione di recupero dei caratteri.
Quindi qui, sto puntando a recuperare i caratteri, a questa funzione.
Ora importante, a) questa
deve essere una funzione che passi qui eb) deve essere una funzione che restituisce
una promessa perché expo ascolterà automaticamente quella promessa per te
e quando la promessa si risolverà, saprà che il caricamento è fatto e quindi chiamerà qualunque cosa passi
qui su onFinish.
Quindi qui, è necessario passare una funzione che quindi imposta effettivamente i dati caricati su true.
Quindi questa funzione qui verrà eseguita per te quando questa operazione verrà eseguita e affinché Expo
possa scoprire
quando ciò viene fatto, questo dovrebbe restituire una promessa.
Quindi ora questi due oggetti di scena lavoreranno insieme e stiamo aggiornando i dati caricati, questo stato è vero e
quindi per non rendere questo contenuto ma per procedere con l'esecuzione di questo codice e infine rendere il
contenuto laggiù quando
il recupero dei nostri caratteri è fatto e tu potrebbe eseguire qualsiasi operazione asincrona qui, ma in genere si utilizza AppLoading per
caricare alcune risorse, come i caratteri o qualcosa del
genere, quindi le risorse che dovrebbero essere presenti all'avvio dell'app di cui hai bisogno immediatamente e
in genere che sono i caratteri.
Ora puoi anche aggiungere un gestore onError qui a proposito e qui, accederò semplicemente alla console l'oggetto errore che
otteniamo anche
qui nei casi in cui il caricamento non riesce. Naturalmente, potresti non voler solo registrare questo, ma invece, fare qualcos'altro,
mostrare alcuni contenuti alternativi nella tua
app, qualcosa del genere. Qui accederò perché non
dovrebbe fallire, i caratteri sono disponibili localmente qui, quindi dovrebbero essere caricabili senza problemi.
Ora se lo salviamo, la nostra app si riavvia ovviamente e non vediamo alcuna differenza qui, anche la
nostra schermata di caricamento non richiede davvero più tempo come prima perché quel caricamento è super
veloce, non si verifica
immediatamente, ecco perché ci serviva questo approccio.
Ma ora abbiamo
caricato i caratteri, come possiamo ora usarli?
Bene diciamo che vogliamo cambiare il nostro inizio di un nuovo titolo di gioco qui per usare il nostro carattere. Ora, per questo, dobbiamo andare alla schermata
di inizio del gioco che è dove vive questo titolo alla fine, qui, inizia un nuovo gioco, ha lo stile del
titolo e quindi giù nel foglio di stile qui sul titolo, ora possiamo impostare famiglia di
caratteri per cambiare la famiglia di caratteri e impostarla su
open-sans-bold per
esempio e, naturalmente, l'identificatore che usi qui deve essere un identificatore che hai caricato qui.
Quindi qui, ho open-sans-bold e open sans,
posso usare questi due identificatori nel mio codice ovunque nell'app quando voglio assegnare un carattere personalizzato ed è proprio
quello che sto facendo qui.
Ora vedi, che ha un carattere diverso che è grassetto e comunque, se stai usando caratteri personalizzati e
vuoi un carattere grassetto, devi caricarlo con la famiglia di
caratteri, non puoi impostare il peso del carattere. React Native supporta questo, ma per i caratteri personalizzati, attualmente Expo
non supporta
questo, invece devi semplicemente usare una famiglia di caratteri separata che non è davvero un problema come puoi vedere.