Ora abbiamo già aggiunto più caratteri in questo corso, quindi non
è troppo nuovo come funziona. Nella cartella delle risorse, aggiungerò una cartella di caratteri ma, di nuovo, puoi memorizzarli dove vuoi. In allegato trovi i due caratteri che
abbiamo usato durante il corso, open sans in grassetto
e regolari e ora dobbiamo caricarli quando
l'app si avvia nell'app. file js. Lì, ora
puoi importare qualcosa da expo e quel qualcosa è il componente di caricamento delle app e devi anche importare una
stella come font da expo-font e per assicurarti che sia disponibile, esegui npm install
--save expo-font per installare questo nel tuo progetto e assicurati di poterlo usare.
Ora queste sono le due cose che devi installare lì e
con quella installata, possiamo aggiungere una nuova funzione qui, forse chiamarla prendere i caratteri.
Questa è una funzione che alla fine non accetta argomenti, ma lì dentro, ora posso chiamare il caricamento del carattere
asincrono e restituirlo perché, poiché restituisce una promessa, i caratteri
recuperati dovrebbero restituire una promessa e passare un oggetto Javascript in cui
mappiamo i caratteri che voglio caricare e poi avrò open-sans che mappo alle mie necessità
di importazione qui dove indico la cartella delle risorse, la cartella dei caratteri e quella open-sans regolare e anche aggiungere open-sans-bold qui come chiave e mappa che per
richiedere / assets / fonts / open-sans-bold in modo che entrambi i caratteri vengano importati qui.
Ora ovviamente è necessario chiamare i font fetch e che dovrebbero essere chiamati dal nostro componente di caricamento
delle app, quindi dobbiamo anche importare lo stato d'uso da React, in modo da poter controllare
se i dati
sono stati ancora caricati o meno in modo che nel componente funzionale qui, possiamo avere il nostro stato di carattere caricato e impostare il carattere caricato
e inizialmente con stato d'uso, che è falso.
Se ciò dovesse essere vero, voglio rendere questo output, quindi finché
è falso, quindi il punto esclamativo qui, voglio invece restituire il componente di caricamento dell'app che prolunga il
nostro caricamento, la nostra schermata di avvio e lì, dobbiamo fornire questi prop di avvio asincrono che punta alla funzione
fetch fonts che è la funzione che viene eseguita quando questo componente viene renderizzato per
la prima volta e poi alla fine che esegue una funzione una volta eseguito questo caricamento e in questa funzione che
deve essere eseguita, I
' Imposterò il mio carattere caricato su true in modo da non rendere più il caricamento delle app ma, invece, rendiamo questo contenuto.
Ora i nostri caratteri vengono caricati e ora possiamo usarli e voglio usarli in due punti: il mio articolo di
prodotto che è il componente che rendiamo nella panoramica dei prodotti. Ovviamente abbiamo del testo, abbiamo
il nostro titolo e abbiamo il nostro prezzo qui ed è lì dove sul
titolo, voglio anche impostare una famiglia di caratteri di open-sans-bold e
sul prezzo, voglio anche impostare una famiglia di caratteri open-sans e nella schermata
dei dettagli del prodotto è la stessa. Il prezzo dovrebbe forse avere una famiglia di caratteri open-sans-bold per avere quello
stile grassetto e la descrizione otterrà solo il carattere sans aperto.
Ora non è tutto in realtà, nel navigatore del negozio nel mio navigatore principale qui, nelle
opzioni di
navigazione predefinite, voglio anche usare quel carattere nell'intestazione, quindi lo stile del titolo dell'intestazione qui dovrebbe effettivamente essere un oggetto in
cui ho impostato la famiglia di caratteri open-sans-bold per usare il carattere grassetto open sans lì e lo stile del titolo header
back definisce lo stile di quel back text che vediamo su iOS e che dovrebbe usare anche una
famiglia di font open-sans, non il grassetto versione. Detto questo, se ora salviamo questo e questo si ricarica, possiamo
vedere che il nostro carattere viene utilizzato. Ora vediamo anche che qui su iOS, il nostro titolo è quindi
tagliato, è qualcosa che dovremo correggere, ma in generale, questo ora sembra come dovrebbe essere. Ora assicuriamoci che il titolo da
tagliare sia corretto e per quello nell'articolo del prodotto qui, che è dove abbiamo quel titolo, qui
questo titolo dovrebbe forse avere un margine verticale ridotto di solo 2 perché mi piace ancora quella distanza e ora il Il 15%
dell'altezza che diamo al titolo e il prezzo è sufficiente per condividere questo e
quindi ora questo sembra come dovrebbe essere.
Ora stiamo usando il carattere personalizzato, possiamo andare alla pagina dei dettagli, direi
che ora è davvero il momento di assicurarci anche di poter aggiungere elementi al carrello e quindi
farlo funzionare nel pulsante carrello.