1
00:00:02,230 --> 00:00:09,790
Quindi voglio iniziare con una regolazione fine del font nelle mie schede qui, nell'intestazione e anche nel testo

2
00:00:09,970 --> 00:00:15,940
qui in tutte le mie ricette. Voglio assicurarmi che ovunque, sto usando il carattere giusto, i

3
00:00:15,940 --> 00:00:19,930
miei caratteri personalizzati e soprattutto qui, nell'intestazione, nelle schede, non lo stiamo ancora assicurando.

4
00:00:20,050 --> 00:00:22,970
Certo, è relativamente

5
00:00:22,990 --> 00:00:31,040
facile assicurarselo e iniziamo con l'intestazione. L'intestazione è generalmente in stile, come il colore di sfondo, con le nostre opzioni

6
00:00:31,040 --> 00:00:34,200
di navigazione predefinite che abbiamo sempre impostato sul navigatore dello stack

7
00:00:34,210 --> 00:00:40,640
a destra, le opzioni di navigazione predefinite qui ci consentono di dare uno stile all'intestazione e, ad esempio, di dare uno stile all'intestazione

8
00:00:40,640 --> 00:00:43,390
in generale e aggiungi un colore di sfondo.

9
00:00:43,470 --> 00:00:50,750
Ora è importante riconoscere che lo stile dell'intestazione ha come target solo la casella, lo sfondo per così

10
00:00:50,750 --> 00:00:59,540
dire, quindi il contenitore in cui si trovano gli oggetti azione, il pulsante Indietro e questo titolo, il titolo stesso non può

11
00:00:59,660 --> 00:01:02,390
essere preso di mira con lo

12
00:01:02,390 --> 00:01:08,420
stile intestazione ma ovviamente ne abbiamo un'alternativa. Oltre allo stile di intestazione in cui possiamo modellare quel

13
00:01:08,420 --> 00:01:14,300
contenitore di intestazione, abbiamo anche uno stile di titolo di intestazione e che non sorprende come target del componente di testo in

14
00:01:14,300 --> 00:01:20,420
cui viene presentato il nostro titolo di intestazione e lì possiamo modellarlo come se potessimo stile elementi di testo in React Native, ad

15
00:01:20,420 --> 00:01:23,960
esempio aggiungendo una famiglia di caratteri di open sans, sto usando di nuovo

16
00:01:23,960 --> 00:01:27,280
la versione non in grassetto in modo da poter vedere rapidamente la differenza.

17
00:01:27,320 --> 00:01:35,560
Questo chiaramente non è più in grassetto, immagino, è abbastanza chiaro da vedere, specialmente qui su iOS e ora se

18
00:01:35,560 --> 00:01:40,240
lo imposto in grassetto, mi assicuro di usare questo giusto stile

19
00:01:40,240 --> 00:01:46,280
sia su iOS che su Android. Ora, tra l'altro, per il testo qui di seguito,

20
00:01:46,540 --> 00:01:53,380
possiamo anche sovrascrivere quel valore predefinito che è il carattere di sistema predefinito impostando lo stile del titolo del titolo dell'intestazione,

21
00:01:53,380 --> 00:01:53,930
che

22
00:01:53,950 --> 00:01:59,110
è un'impostazione separata che possiamo configurare qua e là, possiamo anche impostare la famiglia di

23
00:01:59,140 --> 00:02:01,350
caratteri su diciamo open sans, non

24
00:02:01,360 --> 00:02:07,600
la versione in grassetto, non voglio averlo in grassetto ma voglio averlo nel mio font e questo dovrebbe

25
00:02:07,600 --> 00:02:13,470
essere open sans qui e usare il mio font. Su Android, ovviamente, questo non ha effetto perché

26
00:02:13,470 --> 00:02:17,170
non abbiamo testo indietro. Quindi questa è una

27
00:02:17,190 --> 00:02:24,660
cosa, questa è l'intestazione, per le schede è abbastanza simile. Qui possiamo andare al nostro navigatore a schede che stiamo creando,

28
00:02:24,660 --> 00:02:25,940
come il navigatore a

29
00:02:25,950 --> 00:02:26,700
schede

30
00:02:26,880 --> 00:02:33,390
in basso materiale e questo ovviamente ha il nostro tabScreenConfig e quindi questo secondo oggetto in cui configuriamo il navigatore

31
00:02:33,390 --> 00:02:34,440
stesso e come

32
00:02:34,440 --> 00:02:38,880
sempre nella navigazione React, è il secondo oggetto in cui può controllare l'aspetto generale

33
00:02:38,880 --> 00:02:44,270
delle cose specifiche del navigatore, come nel caso del navigatore a schede, il colore dell'icona della

34
00:02:44,280 --> 00:02:52,280
scheda, il colore della barra, il colore della tinta o anche lo stile dell'etichetta e in effetti qui nelle opzioni della barra delle schede

35
00:02:52,280 --> 00:02:56,330
per il navigatore scheda in basso, possiamo aggiungere uno stile di etichetta

36
00:02:56,330 --> 00:02:59,000
e di nuovo, questo è indirizzato al componente

37
00:02:59,000 --> 00:03:03,010
di testo che contiene la nostra etichetta, possiamo aggiungere una famiglia di

38
00:03:03,140 --> 00:03:09,230
caratteri qui di OpenSans-Bold in modo che possiamo vedere chiaramente la differenza, se questo si ricarica, ora questo chiaramente

39
00:03:09,230 --> 00:03:12,800
è un testo in grassetto. Questo in realtà non sembra troppo

40
00:03:12,800 --> 00:03:14,510
male, quindi penso che possiamo mantenerlo,

41
00:03:14,720 --> 00:03:18,920
ma ovviamente potresti anche impostarlo su open sans se vuoi una versione più sottile, ma

42
00:03:19,010 --> 00:03:22,320
ora userei il nostro font. Ora per Android,

43
00:03:22,320 --> 00:03:29,600
qui il navigatore della scheda inferiore materiale ha anche alcune opzioni di configurazione ma in realtà, non

44
00:03:29,720 --> 00:03:31,910
ha uno stile di etichetta.

45
00:03:31,910 --> 00:03:38,690
Quello che puoi fare lì invece è nelle schede separate che stai caricando, quindi sulle opzioni di navigazione delle schede

46
00:03:38,690 --> 00:03:47,170
che stai caricando, dove stai anche impostando l'icona della barra delle schede e così via, lì possiamo aggiungere l'etichetta della barra delle schede qui dove

47
00:03:47,170 --> 00:03:54,160
potremmo impostare un'etichetta come i pasti, più segni di spiegazione per sovrascrivere ciò che usiamo come etichetta ora sia su iOS

48
00:03:54,160 --> 00:03:54,540
che

49
00:03:54,550 --> 00:04:00,490
anche su Android e che può effettivamente essere una stringa come questa, ma puoi anche impostarla su

50
00:04:00,490 --> 00:04:07,450
un componente React, su un componente di testo, e cioè lì, puoi impostare l'etichetta, i pasti ma ovviamente ora qui,

51
00:04:07,720 --> 00:04:11,490
puoi aggiungere stile e aggiungere tutti gli stili che desideri.

52
00:04:11,500 --> 00:04:16,120
Quindi un po 'di soluzione alternativa dal momento che non esiste un altro modo integrato di definire lo stile

53
00:04:16,120 --> 00:04:19,060
per il navigatore delle schede inferiori dei materiali, ma meglio di niente.

54
00:04:19,060 --> 00:04:25,060
Quindi qui, ora possiamo impostare la famiglia di caratteri su OpenSans-Bold e se lo facciamo, ovviamente dobbiamo anche assicurarci di

55
00:04:25,060 --> 00:04:30,240
importare ora il componente di testo da React Native perché altrimenti non possiamo usarlo laggiù e ora

56
00:04:35,760 --> 00:04:40,980
con quello , ovviamente lo otteniamo anche sul nostro iOS perché condividiamo la configurazione, lo sistemeremo in

57
00:04:40,980 --> 00:04:45,780
un secondo, ma ora è così che possiamo impostare il nostro stile anche lì, ma

58
00:04:45,810 --> 00:04:52,820
ovviamente ora abbiamo perso il colore che è il lato negativo dell'impostazione manuale qui e poiché abbiamo solo bisogno di questa soluzione alternativa,

59
00:04:52,820 --> 00:04:59,930
per Android, per le schede di fondo materiale, la soluzione più semplice è utilizzare l'API della piattaforma e impostare questa etichetta della barra delle

60
00:04:59,930 --> 00:05:04,760
schede su questo componente di testo solo se ' su Android perché solo allora abbiamo bisogno

61
00:05:04,760 --> 00:05:11,330
di questa soluzione alternativa per impostare la famiglia di caratteri. Quindi controllerò se siamo su Android e, in tal

62
00:05:11,330 --> 00:05:18,650
caso, restituirò un componente di testo qui, altrimenti restituirò solo i pasti di testo e quindi il vantaggio di restituire un testo

63
00:05:18,650 --> 00:05:24,710
qui è semplicemente che l'altro nostro le impostazioni che impostano il colore della tinta, lo stile dell'etichetta e

64
00:05:24,710 --> 00:05:30,920
così via verranno attivate e non verranno ignorate. Se impostiamo il nostro componente di testo, disabiliteremo tutte quelle funzionalità

65
00:05:30,920 --> 00:05:34,700
predefinite, tutte queste funzionalità predefinite che sono integrate nel navigatore della scheda in basso.

66
00:05:34,700 --> 00:05:39,200
Il problema con il navigatore della scheda inferiore materiale è che semplicemente non ha tutte

67
00:05:39,200 --> 00:05:39,800
queste

68
00:05:39,860 --> 00:05:44,690
funzionalità predefinite integrate, quindi lì dobbiamo scavalcare questo, ma dobbiamo farlo solo per Android d'altra parte.

69
00:05:44,780 --> 00:05:48,290
Ora possiamo copiarlo e fare esattamente la stessa cosa ovviamente

70
00:05:48,290 --> 00:05:57,530
per i preferiti, renderizzare i preferiti come testo su iOS e ovviamente anche nel componente di testo per Android e con quello, ora dovremmo avere uno

71
00:05:57,590 --> 00:06:03,860
stile che funzioni e questo sembra buono . Su iOS lì, praticamente non abbiamo

72
00:06:03,920 --> 00:06:09,740
cambiato nulla e su Android, ora abbiamo anche i nostri caratteri personalizzati.

73
00:06:09,740 --> 00:06:12,520
Quindi è un po 'una soluzione alternativa che

74
00:06:12,520 --> 00:06:19,130
è necessaria qui purtroppo quando si lavora con il navigatore delle schede in basso ma anche non troppo difficile da implementare e

75
00:06:19,130 --> 00:06:24,290
con ciò, ci stiamo assicurando che stiamo usando il nostro font personalizzato ovunque nella navigazione relativa caratteristiche

76
00:06:24,800 --> 00:06:25,850
della nostra app.