1
00:00:02,190 --> 00:00:06,450
Ora abbiamo già aggiunto più caratteri in questo corso, quindi non

2
00:00:06,450 --> 00:00:12,780
è 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

3
00:00:12,780 --> 00:00:15,470
abbiamo usato durante il corso, open sans in grassetto

4
00:00:15,480 --> 00:00:17,550
e regolari e ora dobbiamo caricarli quando

5
00:00:17,550 --> 00:00:22,690
l'app si avvia nell'app. file js. Lì, ora

6
00:00:23,100 --> 00:00:34,690
puoi importare qualcosa da expo e quel qualcosa è il componente di caricamento delle app e devi anche importare una

7
00:00:34,690 --> 00:00:42,310
stella come font da expo-font e per assicurarti che sia disponibile, esegui npm install

8
00:00:42,340 --> 00:00:49,870
--save expo-font per installare questo nel tuo progetto e assicurati di poterlo usare.

9
00:00:49,890 --> 00:00:53,760
Ora queste sono le due cose che devi installare lì e

10
00:00:53,770 --> 00:00:58,620
con quella installata, possiamo aggiungere una nuova funzione qui, forse chiamarla prendere i caratteri.

11
00:00:58,640 --> 00:01:07,690
Questa è una funzione che alla fine non accetta argomenti, ma lì dentro, ora posso chiamare il caricamento del carattere

12
00:01:08,200 --> 00:01:13,510
asincrono e restituirlo perché, poiché restituisce una promessa, i caratteri

13
00:01:13,510 --> 00:01:18,910
recuperati dovrebbero restituire una promessa e passare un oggetto Javascript in cui

14
00:01:18,940 --> 00:01:25,560
mappiamo i caratteri che voglio caricare e poi avrò open-sans che mappo alle mie necessità

15
00:01:25,560 --> 00:01:38,020
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

16
00:01:38,080 --> 00:01:45,560
richiedere / assets / fonts / open-sans-bold in modo che entrambi i caratteri vengano importati qui.

17
00:01:45,580 --> 00:01:51,230
Ora ovviamente è necessario chiamare i font fetch e che dovrebbero essere chiamati dal nostro componente di caricamento

18
00:01:51,370 --> 00:01:56,800
delle app, quindi dobbiamo anche importare lo stato d'uso da React, in modo da poter controllare

19
00:01:56,800 --> 00:01:57,990
se i dati

20
00:01:58,240 --> 00:02:06,430
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

21
00:02:06,430 --> 00:02:09,080
e inizialmente con stato d'uso, che è falso.

22
00:02:09,250 --> 00:02:13,190
Se ciò dovesse essere vero, voglio rendere questo output, quindi finché

23
00:02:13,270 --> 00:02:18,970
è falso, quindi il punto esclamativo qui, voglio invece restituire il componente di caricamento dell'app che prolunga il

24
00:02:18,970 --> 00:02:25,210
nostro caricamento, la nostra schermata di avvio e lì, dobbiamo fornire questi prop di avvio asincrono che punta alla funzione

25
00:02:25,930 --> 00:02:30,850
fetch fonts che è la funzione che viene eseguita quando questo componente viene renderizzato per

26
00:02:30,850 --> 00:02:37,350
la prima volta e poi alla fine che esegue una funzione una volta eseguito questo caricamento e in questa funzione che

27
00:02:37,350 --> 00:02:38,830
deve essere eseguita, I

28
00:02:38,830 --> 00:02:45,890
' Imposterò il mio carattere caricato su true in modo da non rendere più il caricamento delle app ma, invece, rendiamo questo contenuto.

29
00:02:46,000 --> 00:02:51,490
Ora i nostri caratteri vengono caricati e ora possiamo usarli e voglio usarli in due punti: il mio articolo di

30
00:02:51,520 --> 00:02:58,030
prodotto che è il componente che rendiamo nella panoramica dei prodotti. Ovviamente abbiamo del testo, abbiamo

31
00:02:58,030 --> 00:03:06,340
il nostro titolo e abbiamo il nostro prezzo qui ed è lì dove sul

32
00:03:06,340 --> 00:03:12,760
titolo, voglio anche impostare una famiglia di caratteri di open-sans-bold e

33
00:03:12,760 --> 00:03:20,020
sul prezzo, voglio anche impostare una famiglia di caratteri open-sans e nella schermata

34
00:03:20,020 --> 00:03:29,080
dei dettagli del prodotto è la stessa. Il prezzo dovrebbe forse avere una famiglia di caratteri open-sans-bold per avere quello

35
00:03:29,080 --> 00:03:33,310
stile grassetto e la descrizione otterrà solo il carattere sans aperto.

36
00:03:33,490 --> 00:03:40,880
Ora non è tutto in realtà, nel navigatore del negozio nel mio navigatore principale qui, nelle

37
00:03:40,880 --> 00:03:41,880
opzioni di

38
00:03:41,900 --> 00:03:51,520
navigazione predefinite, voglio anche usare quel carattere nell'intestazione, quindi lo stile del titolo dell'intestazione qui dovrebbe effettivamente essere un oggetto in

39
00:03:51,520 --> 00:04:01,360
cui ho impostato la famiglia di caratteri open-sans-bold per usare il carattere grassetto open sans lì e lo stile del titolo header

40
00:04:01,510 --> 00:04:09,600
back definisce lo stile di quel back text che vediamo su iOS e che dovrebbe usare anche una

41
00:04:09,600 --> 00:04:17,120
famiglia di font open-sans, non il grassetto versione. Detto questo, se ora salviamo questo e questo si ricarica, possiamo

42
00:04:17,860 --> 00:04:23,060
vedere che il nostro carattere viene utilizzato. Ora vediamo anche che qui su iOS, il nostro titolo è quindi

43
00:04:23,110 --> 00:04:29,330
tagliato, è qualcosa che dovremo correggere, ma in generale, questo ora sembra come dovrebbe essere. Ora assicuriamoci che il titolo da

44
00:04:29,350 --> 00:04:37,010
tagliare sia corretto e per quello nell'articolo del prodotto qui, che è dove abbiamo quel titolo, qui

45
00:04:37,010 --> 00:04:47,340
questo titolo dovrebbe forse avere un margine verticale ridotto di solo 2 perché mi piace ancora quella distanza e ora il Il 15%

46
00:04:47,340 --> 00:04:53,800
dell'altezza che diamo al titolo e il prezzo è sufficiente per condividere questo e

47
00:04:53,880 --> 00:04:57,390
quindi ora questo sembra come dovrebbe essere.

48
00:04:57,660 --> 00:05:01,540
Ora stiamo usando il carattere personalizzato, possiamo andare alla pagina dei dettagli, direi

49
00:05:01,710 --> 00:05:06,750
che ora è davvero il momento di assicurarci anche di poter aggiungere elementi al carrello e quindi

50
00:05:06,750 --> 00:05:08,340
farlo funzionare nel pulsante carrello.