Ora hai imparato come aggiungere caratteri a un'applicazione e in allegato, troverai un file zip con i
caratteri che voglio aggiungere. Per quello nella cartella delle
risorse, aggiungerò una nuova cartella di caratteri e poi sarà OpenSans-Bold e regolare. il file ttf che si trova nel file zip
che trovi allegato che voglio aggiungere qui.
Ora aggiungere i file da soli non farà molto come sapete, invece
dobbiamo caricare questi caratteri e lo facciamo nell'app. js file che è il nostro file iniziale
che avvia l'intera app. Lì, dobbiamo importare
tutto come font da expo-font e questo potrebbe non essere ancora disponibile
nel tuo progetto, quindi potresti voler eseguire npm install --save expo-font per essere sicuro che
sia disponibile, per
installarlo pacchetto e con quello installato, puoi importare font da lì, in questo modo e voglio anche
importare il componente di caricamento
dell'app da expo, che è il componente che prolungherà la schermata iniziale quando l'app si avvia fino a quando
i nostri font non vengono caricati in modo che solo noi vedere qualcosa sullo
schermo quando tutte le nostre risorse, e in questo caso questi sono
i caratteri, sono davvero disponibili e ci sono davvero. Ora con queste importazioni aggiunte, possiamo aggiungere una funzione
qui al di
fuori della nostra funzione componente che chiamerò fetch fonts e questa
è una funzione che alla fine utilizzerà font, quindi quello che sto importando qui, caricherà asincrono e poi noi passiamo
un oggetto in cui descriviamo i dati che vogliamo caricare e questo è il carattere open sans che
registrerò sotto open sans, aggiungiamo questo richiedendolo da. / assets / fonts / OpenSans, non grassetto ma regolare. ttf e poi in più, abbiamo
open-sans-bold, questo è l'altro carattere che voglio registrare, richiedendolo da asset / fonts
/ OpenSans-Bold. ttf, in questo modo.
Ora dobbiamo restituirlo perché load async restituisce una promessa e voglio restituirlo nella mia funzione fetch fonts
perché con questo, possiamo usarlo insieme al componente di caricamento dell'app e questo è uno schema che hai
appreso in precedenza nel corso.
Quindi, nel caso in cui
questo sia nuovo di zecca, assicurati di passare prima attraverso le altre sezioni di questo corso.
Quindi ora possiamo usare i font di recupero con il caricamento delle app e lo facciamo all'interno del nostro
componente dell'app, lì, gestirò un po 'di stato e lo farò con l'aiuto del hook useState che importiamo da
React e lo chiamerò font di stato caricato e set di font caricato e chiamata useState e inizialmente, questo è falso perché inizialmente, il font non
è stato caricato e quindi qui,
possiamo verificare se il font non è stato caricato che inizialmente è il caso, quindi voglio
tornare il componente di caricamento dell'app invece del mio normale contenuto di app perché nel componente di caricamento dell'app, possiamo
aggiungere la proprietà start async e puntare a recuperare i caratteri che danno il via a questa funzione di recupero
dei caratteri e una volta fatto, la funzione che passiamo a onFinish sarà chiamato e in questa funzione,
imposterò semplicemente il carattere caricato su true, in questo modo. Quindi questo ci assicura che manteniamo semplicemente aperta la schermata iniziale
fino a quando non vengono caricati i nostri caratteri e questo verrà reso fino a quando non avremo ricaricato
i nostri caratteri e, successivamente, caricheremo invece questo contenuto. Ora con ciò, ci stiamo assicurando che stiamo importando i nostri caratteri e che
possiamo iniziare a usarli e ne avremo bisogno in tutto questo modulo.
Con ciò, ora è il momento di iniziare con l'aggiunta effettiva di ciò per cui siamo venuti tutti, la navigazione.