1
00:00:02,270 --> 00:00:05,450
Quindi, come possiamo assegnare icone qui?

2
00:00:05,450 --> 00:00:09,580
Come possiamo quindi assicurarci di usare il colore che

3
00:00:09,590 --> 00:00:10,990
vogliamo usare?

4
00:00:11,090 --> 00:00:12,760
Cominciamo con il

5
00:00:12,760 --> 00:00:17,920
colore prima di aggiungere le icone. Proprio come la funzione di navigazione dello stack di

6
00:00:18,020 --> 00:00:20,290
creazione dello stack, anche il navigatore della

7
00:00:20,290 --> 00:00:25,250
scheda di creazione inferiore accetta un secondo argomento. Il primo argomento è l'oggetto di configurazione in cui

8
00:00:25,280 --> 00:00:27,370
si configurano le diverse schede e le schermate

9
00:00:27,410 --> 00:00:33,600
a cui puntano, il secondo argomento è anche un oggetto in cui è possibile configurare il navigatore in generale e lì, si

10
00:00:33,610 --> 00:00:35,290
hanno un paio di impostazioni.

11
00:00:35,330 --> 00:00:40,120
Ancora una volta, i documenti ufficiali sono il posto dove andare per conoscere ogni

12
00:00:40,310 --> 00:00:45,340
singola impostazione qui, una delle impostazioni più importanti qui sono le opzioni della barra delle schede.

13
00:00:45,380 --> 00:00:52,970
Questo è un altro oggetto e qui puoi controllare in dettaglio come appare la barra delle schede, come è in stile.

14
00:00:53,090 --> 00:00:59,180
È possibile impostare un colore di tinta inattivo che è il colore della scheda che non è attualmente attivo.

15
00:00:59,180 --> 00:01:03,160
Puoi impostare un colore di tinta attivo ed è quello di cui abbiamo

16
00:01:03,170 --> 00:01:08,600
effettivamente bisogno qui, puoi impostare un colore di sfondo attivo e un colore di sfondo inattivo e ovviamente

17
00:01:08,600 --> 00:01:11,720
anche cambiare lo sfondo delle schede qui se vuoi

18
00:01:11,930 --> 00:01:16,540
e quindi hai un sacco di possibilità per perfezionare questo in base alle tue esigenze.

19
00:01:16,660 --> 00:01:20,000
E qui, imposterò un colore di tinta attivo perché è tutto

20
00:01:20,000 --> 00:01:25,910
ciò di cui ho bisogno qui, ma ovviamente mi sento libero di giocarci e cambiare anche i colori di

21
00:01:25,910 --> 00:01:32,330
sfondo e cambiare altre impostazioni e imposterò il mio colore di tinta attivo su un valore per la mia costante di

22
00:01:32,330 --> 00:01:35,390
colori che importa qui, la imposterò su colori accenti.

23
00:01:35,410 --> 00:01:37,300
Non l'hai mai usato prima, ma ora

24
00:01:37,370 --> 00:01:42,290
lo userò e questo è questo colore arancione che ora abbiamo quindi ed è così facile cambiare

25
00:01:42,290 --> 00:01:45,900
il colore della scheda attiva. Ora questa è una cosa,

26
00:01:46,110 --> 00:01:50,280
per favore nota anche che questo ovviamente non aggiunge un'icona e come

27
00:01:50,280 --> 00:01:51,020
sarebbe,

28
00:01:51,030 --> 00:01:57,300
non stiamo dicendo nulla sull'icona che vogliamo aggiungere. Ora per aggiungere l'icona, il modello semplice che

29
00:01:57,480 --> 00:02:01,860
penso sia che vai alla configurazione del tuo percorso qui, quindi alla configurazione

30
00:02:01,860 --> 00:02:07,710
in cui mappi le schermate alle tue schede e usi il modulo più lungo in cui aggiungi

31
00:02:07,710 --> 00:02:12,000
la proprietà dello schermo e in cui aggiungi anche opzioni di navigazione.

32
00:02:12,000 --> 00:02:17,370
A proposito, potresti anche farlo direttamente nel componente ovviamente aggiungendo opzioni di navigazione

33
00:02:17,400 --> 00:02:19,700
proprio come abbiamo fatto prima,

34
00:02:19,710 --> 00:02:25,080
tuttavia poiché i pasti qui sono in realtà un navigatore, l'unico posto dove

35
00:02:25,110 --> 00:02:26,560
aggiungere opzioni di

36
00:02:26,700 --> 00:02:31,330
navigazione è ovviamente qui o anche qui, su crea stack navigator.

37
00:02:31,560 --> 00:02:37,290
Lì puoi anche impostare una chiave delle opzioni di navigazione qui sul secondo argomento, su questo oggetto

38
00:02:37,320 --> 00:02:42,390
si passa come secondo argomento per creare stack navigator in cui si configura il navigatore

39
00:02:42,390 --> 00:02:48,180
generale per fornire a questo navigatore alcune opzioni di navigazione perché le opzioni di navigazione che assegniamo a

40
00:02:48,180 --> 00:02:54,060
il navigatore dei pasti, quindi per il navigatore dello stack sono ora le opzioni che sono prese in

41
00:02:54,270 --> 00:03:00,810
considerazione dal navigatore delle schede che utilizza questo navigatore dei pasti come navigatore nidificato e le opzioni di navigazione che

42
00:03:01,140 --> 00:03:10,680
possiamo impostare qui includono un'icona della barra delle schede. Possiamo aggiungere l'icona della barra delle schede qui e l'icona della barra delle schede in realtà è una funzione. Non è una singola icona che

43
00:03:10,770 --> 00:03:18,900
la punti ma invece, questa è una funzione. È una funzione che riceve alcune informazioni sulla scheda che potresti dire,

44
00:03:18,990 --> 00:03:23,300
dovrebbe andare qui, questo è l'argomento che otteniamo automaticamente perché questa funzione verrà

45
00:03:23,330 --> 00:03:28,490
chiamata dalla navigazione di React e l'icona della barra delle schede, questa funzione qui deve

46
00:03:28,970 --> 00:03:34,340
restituire l'icona che desideri per eseguire il rendering per questa scheda, quindi in questo caso per

47
00:03:34,340 --> 00:03:35,720
la scheda Pasti.

48
00:03:39,680 --> 00:03:46,360
Ciò significa che devo essere in grado di utilizzare le icone qui e per questo, possiamo importare ioniconi o qualsiasi altro

49
00:03:46,370 --> 00:03:50,680
set di icone che si desidera utilizzare da @ expo / vector-icons.

50
00:03:50,680 --> 00:03:52,440
Ancora una volta, sentiti libero

51
00:03:52,450 --> 00:03:57,400
di installare questo pacchetto, normalmente dovrebbe essere installato automaticamente quando lavori con Expo ma puoi semplicemente

52
00:03:57,400 --> 00:04:03,040
eseguire npm install --save @ expo / vector-icons per essere sicuro di averlo installato e puoi usare qualsiasi set

53
00:04:03,100 --> 00:04:07,980
di icone vuoi ma io uso sempre gli iononi durante questo corso, mi atterrò a loro.

54
00:04:08,230 --> 00:04:12,340
Con ciò, puoi usare gli iononi come componente come hai appreso in precedenza nel corso.

55
00:04:12,340 --> 00:04:18,580
Quindi qui possiamo semplicemente restituire iononi come questo per rendere un'icona iononica e ora puoi usare

56
00:04:18,580 --> 00:04:20,090
qualsiasi nome icona

57
00:04:20,170 --> 00:04:24,090
che vuoi qui e qui voglio usare ios-restaurant che è

58
00:04:24,100 --> 00:04:29,090
semplicemente un'icona che ho trovato nell'elenco delle icone, questo elenco qui che

59
00:04:29,320 --> 00:04:32,750
ho anche mostrato in precedenza, c'è questa icona

60
00:04:32,870 --> 00:04:37,320
ios-restaurant che ho scelto che ora uso e che indico qui.

61
00:04:37,450 --> 00:04:40,120
Questa è l'icona che voglio renderizzare,

62
00:04:40,120 --> 00:04:42,610
le darò una dimensione di

63
00:04:42,610 --> 00:04:43,990
25, puoi

64
00:04:43,990 --> 00:04:46,890
sperimentarlo ma ho trovato 25 per apparire

65
00:04:46,900 --> 00:04:50,200
abbastanza decente qui nella barra delle schede e

66
00:04:50,350 --> 00:04:57,610
un colore e questo è ora importante di tabInfo. tintColor perché il colore che impostiamo qui ovviamente dovrebbe essere il nostro colore

67
00:04:57,610 --> 00:04:58,810
che abbiamo impostato qui.

68
00:04:58,810 --> 00:05:01,980
Ora, ovviamente, potremmo codificare questo per colorare il colore dell'accento

69
00:05:01,990 --> 00:05:06,030
qui, ma se poi lo cambiamo laggiù, dobbiamo ricordare che lo cambiamo anche lassù.

70
00:05:06,040 --> 00:05:11,440
La cosa buona è ed è per questo che questa è una funzione, che React navigation chiama questa

71
00:05:11,440 --> 00:05:17,830
funzione per noi e ci fornisce alcune informazioni vitali su come la nostra barra delle schede è configurata in quell'oggetto informazioni sulla

72
00:05:17,830 --> 00:05:23,350
scheda e che ad esempio include il colore della tinta che abbiamo impostato , in modo che possiamo

73
00:05:23,350 --> 00:05:29,440
recuperarlo dinamicamente qui per colorare l'icona, in modo che se cambiamo il colore laggiù per la barra delle schede, si

74
00:05:29,470 --> 00:05:30,910
rifletta automaticamente nelle nostre

75
00:05:30,940 --> 00:05:35,810
icone lassù, quindi è un po 'di comodità che abbiamo qui che possiamo usare qui .

76
00:05:35,810 --> 00:05:42,740
Quindi, sto visualizzando queste icone per i pasti e per i preferiti, ora possiamo usare un approccio simile, utilizzare quella forma più lunga in cui abbiamo

77
00:05:42,770 --> 00:05:48,200
impostato lo schermo qui e quindi aggiungere qui le opzioni di navigazione che verranno unite a qualsiasi navigazione opzioni che

78
00:05:52,430 --> 00:05:57,400
impostiamo nella schermata dei preferiti ma tieni presente che ovviamente puoi assolutamente impostare anche le opzioni di navigazione

79
00:05:57,400 --> 00:06:00,920
qui nel componente della schermata dei preferiti, ma per tenerlo tutto in un

80
00:06:00,980 --> 00:06:03,620
posto, lo farò invece nella mia navigazione impostata qui.

81
00:06:03,620 --> 00:06:06,150
Quindi queste sono le mie opzioni di

82
00:06:06,170 --> 00:06:11,420
navigazione per questa schermata, proprio come per questo navigatore, il navigatore dei pasti, possiamo ovviamente impostare

83
00:06:11,480 --> 00:06:14,280
le opzioni di navigazione per una schermata, questo

84
00:06:14,330 --> 00:06:19,880
è quello che abbiamo fatto in tutto il modulo dopo tutto e lì, voglio fare essenzialmente lo

85
00:06:19,940 --> 00:06:25,790
stesso, quindi lo copierò, lo aggiungerò qui a questo oggetto delle opzioni di navigazione e l'unica cosa che

86
00:06:25,790 --> 00:06:30,130
differisce qui è l'icona che voglio usare, qui è ios-star invece di ios-restaurant.

87
00:06:30,290 --> 00:06:36,170
E con ciò se salviamo questo, in realtà ricevo un errore perché poiché ora

88
00:06:36,170 --> 00:06:42,230
uso jsx qui, dobbiamo importare React ovviamente, ecco come funziona React perché jsx dietro le

89
00:06:42,260 --> 00:06:48,510
quinte viene trasformato in React create element come sai e quindi ora dopo aver aggiunto l'importazione

90
00:06:48,530 --> 00:06:54,680
React qui in MealsNavigator. file js. Funziona e ora abbiamo icone che assumono

91
00:06:54,680 --> 00:06:58,180
automaticamente il nostro colore della tinta ed è così facile aggiungere icone.

92
00:06:58,270 --> 00:07:03,740
Ora, oltre a impostare l'icona, potresti voler impostare anche l'etichetta e vedrai che per impostazione predefinita,

93
00:07:03,860 --> 00:07:10,580
l'etichetta, i pasti e i preferiti sono semplicemente l'identificatore che abbiamo assegnato qui quando abbiamo impostato i nostri pasti e preferiti

94
00:07:10,610 --> 00:07:12,050
di navigazione della scheda.

95
00:07:12,050 --> 00:07:17,540
Ora spesso ha senso, ma nel caso in cui si desideri avere un'etichetta diversa, quindi nelle

96
00:07:17,630 --> 00:07:20,780
opzioni di navigazione dello schermo si carica qui in

97
00:07:20,780 --> 00:07:28,910
questa scheda, è possibile impostare una proprietà dell'etichetta della barra delle schede e lì, che è solo una stringa dove potresti avere preferiti con

98
00:07:28,910 --> 00:07:34,310
un punto esclamativo e se lo imposti, vedrai che ora hai preferiti con un punto

99
00:07:34,310 --> 00:07:37,040
esclamativo qui invece di preferiti come prima.

100
00:07:37,040 --> 00:07:42,500
Quindi puoi sovrascrivere questa etichetta predefinita che si presume che normalmente sia il tuo identificatore, se

101
00:07:42,500 --> 00:07:47,510
ne vuoi una diversa, puoi sovrascriverla e, naturalmente, ci sono più opzioni che puoi impostare

102
00:07:47,510 --> 00:07:52,700
e allegare, trovi un link ai documenti ufficiali per questo navigatore in cui puoi imparare

103
00:07:52,700 --> 00:08:00,740
tutto sulle opzioni che puoi impostare sul navigatore stesso ma poi anche sulle opzioni di navigazione delle schermate secondarie, quindi delle schermate nidificate o

104
00:08:00,740 --> 00:08:04,850
dei navigatori nidificati all'interno di quella scheda di navigazione, quindi cosa stiamo

105
00:08:04,850 --> 00:08:05,870
impostando qui.