Quindi, come possiamo assegnare icone qui?
Come possiamo quindi assicurarci di usare il colore che
vogliamo usare?
Cominciamo con il
colore prima di aggiungere le icone. Proprio come la funzione di navigazione dello stack di
creazione dello stack, anche il navigatore della
scheda di creazione inferiore accetta un secondo argomento. Il primo argomento è l'oggetto di configurazione in cui
si configurano le diverse schede e le schermate
a cui puntano, il secondo argomento è anche un oggetto in cui è possibile configurare il navigatore in generale e lì, si
hanno un paio di impostazioni.
Ancora una volta, i documenti ufficiali sono il posto dove andare per conoscere ogni
singola impostazione qui, una delle impostazioni più importanti qui sono le opzioni della barra delle schede.
Questo è un altro oggetto e qui puoi controllare in dettaglio come appare la barra delle schede, come è in stile.
È possibile impostare un colore di tinta inattivo che è il colore della scheda che non è attualmente attivo.
Puoi impostare un colore di tinta attivo ed è quello di cui abbiamo
effettivamente bisogno qui, puoi impostare un colore di sfondo attivo e un colore di sfondo inattivo e ovviamente
anche cambiare lo sfondo delle schede qui se vuoi
e quindi hai un sacco di possibilità per perfezionare questo in base alle tue esigenze.
E qui, imposterò un colore di tinta attivo perché è tutto
ciò di cui ho bisogno qui, ma ovviamente mi sento libero di giocarci e cambiare anche i colori di
sfondo e cambiare altre impostazioni e imposterò il mio colore di tinta attivo su un valore per la mia costante di
colori che importa qui, la imposterò su colori accenti.
Non l'hai mai usato prima, ma ora
lo userò e questo è questo colore arancione che ora abbiamo quindi ed è così facile cambiare
il colore della scheda attiva. Ora questa è una cosa,
per favore nota anche che questo ovviamente non aggiunge un'icona e come
sarebbe,
non stiamo dicendo nulla sull'icona che vogliamo aggiungere. Ora per aggiungere l'icona, il modello semplice che
penso sia che vai alla configurazione del tuo percorso qui, quindi alla configurazione
in cui mappi le schermate alle tue schede e usi il modulo più lungo in cui aggiungi
la proprietà dello schermo e in cui aggiungi anche opzioni di navigazione.
A proposito, potresti anche farlo direttamente nel componente ovviamente aggiungendo opzioni di navigazione
proprio come abbiamo fatto prima,
tuttavia poiché i pasti qui sono in realtà un navigatore, l'unico posto dove
aggiungere opzioni di
navigazione è ovviamente qui o anche qui, su crea stack navigator.
Lì puoi anche impostare una chiave delle opzioni di navigazione qui sul secondo argomento, su questo oggetto
si passa come secondo argomento per creare stack navigator in cui si configura il navigatore
generale per fornire a questo navigatore alcune opzioni di navigazione perché le opzioni di navigazione che assegniamo a
il navigatore dei pasti, quindi per il navigatore dello stack sono ora le opzioni che sono prese in
considerazione dal navigatore delle schede che utilizza questo navigatore dei pasti come navigatore nidificato e le opzioni di navigazione che
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
la punti ma invece, questa è una funzione. È una funzione che riceve alcune informazioni sulla scheda che potresti dire,
dovrebbe andare qui, questo è l'argomento che otteniamo automaticamente perché questa funzione verrà
chiamata dalla navigazione di React e l'icona della barra delle schede, questa funzione qui deve
restituire l'icona che desideri per eseguire il rendering per questa scheda, quindi in questo caso per
la scheda Pasti.
Ciò significa che devo essere in grado di utilizzare le icone qui e per questo, possiamo importare ioniconi o qualsiasi altro
set di icone che si desidera utilizzare da @ expo / vector-icons.
Ancora una volta, sentiti libero
di installare questo pacchetto, normalmente dovrebbe essere installato automaticamente quando lavori con Expo ma puoi semplicemente
eseguire npm install --save @ expo / vector-icons per essere sicuro di averlo installato e puoi usare qualsiasi set
di icone vuoi ma io uso sempre gli iononi durante questo corso, mi atterrò a loro.
Con ciò, puoi usare gli iononi come componente come hai appreso in precedenza nel corso.
Quindi qui possiamo semplicemente restituire iononi come questo per rendere un'icona iononica e ora puoi usare
qualsiasi nome icona
che vuoi qui e qui voglio usare ios-restaurant che è
semplicemente un'icona che ho trovato nell'elenco delle icone, questo elenco qui che
ho anche mostrato in precedenza, c'è questa icona
ios-restaurant che ho scelto che ora uso e che indico qui.
Questa è l'icona che voglio renderizzare,
le darò una dimensione di
25, puoi
sperimentarlo ma ho trovato 25 per apparire
abbastanza decente qui nella barra delle schede e
un colore e questo è ora importante di tabInfo. tintColor perché il colore che impostiamo qui ovviamente dovrebbe essere il nostro colore
che abbiamo impostato qui.
Ora, ovviamente, potremmo codificare questo per colorare il colore dell'accento
qui, ma se poi lo cambiamo laggiù, dobbiamo ricordare che lo cambiamo anche lassù.
La cosa buona è ed è per questo che questa è una funzione, che React navigation chiama questa
funzione per noi e ci fornisce alcune informazioni vitali su come la nostra barra delle schede è configurata in quell'oggetto informazioni sulla
scheda e che ad esempio include il colore della tinta che abbiamo impostato , in modo che possiamo
recuperarlo dinamicamente qui per colorare l'icona, in modo che se cambiamo il colore laggiù per la barra delle schede, si
rifletta automaticamente nelle nostre
icone lassù, quindi è un po 'di comodità che abbiamo qui che possiamo usare qui .
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
impostato lo schermo qui e quindi aggiungere qui le opzioni di navigazione che verranno unite a qualsiasi navigazione opzioni che
impostiamo nella schermata dei preferiti ma tieni presente che ovviamente puoi assolutamente impostare anche le opzioni di navigazione
qui nel componente della schermata dei preferiti, ma per tenerlo tutto in un
posto, lo farò invece nella mia navigazione impostata qui.
Quindi queste sono le mie opzioni di
navigazione per questa schermata, proprio come per questo navigatore, il navigatore dei pasti, possiamo ovviamente impostare
le opzioni di navigazione per una schermata, questo
è quello che abbiamo fatto in tutto il modulo dopo tutto e lì, voglio fare essenzialmente lo
stesso, quindi lo copierò, lo aggiungerò qui a questo oggetto delle opzioni di navigazione e l'unica cosa che
differisce qui è l'icona che voglio usare, qui è ios-star invece di ios-restaurant.
E con ciò se salviamo questo, in realtà ricevo un errore perché poiché ora
uso jsx qui, dobbiamo importare React ovviamente, ecco come funziona React perché jsx dietro le
quinte viene trasformato in React create element come sai e quindi ora dopo aver aggiunto l'importazione
React qui in MealsNavigator. file js. Funziona e ora abbiamo icone che assumono
automaticamente il nostro colore della tinta ed è così facile aggiungere icone.
Ora, oltre a impostare l'icona, potresti voler impostare anche l'etichetta e vedrai che per impostazione predefinita,
l'etichetta, i pasti e i preferiti sono semplicemente l'identificatore che abbiamo assegnato qui quando abbiamo impostato i nostri pasti e preferiti
di navigazione della scheda.
Ora spesso ha senso, ma nel caso in cui si desideri avere un'etichetta diversa, quindi nelle
opzioni di navigazione dello schermo si carica qui in
questa scheda, è possibile impostare una proprietà dell'etichetta della barra delle schede e lì, che è solo una stringa dove potresti avere preferiti con
un punto esclamativo e se lo imposti, vedrai che ora hai preferiti con un punto
esclamativo qui invece di preferiti come prima.
Quindi puoi sovrascrivere questa etichetta predefinita che si presume che normalmente sia il tuo identificatore, se
ne vuoi una diversa, puoi sovrascriverla e, naturalmente, ci sono più opzioni che puoi impostare
e allegare, trovi un link ai documenti ufficiali per questo navigatore in cui puoi imparare
tutto sulle opzioni che puoi impostare sul navigatore stesso ma poi anche sulle opzioni di navigazione delle schermate secondarie, quindi delle schermate nidificate o
dei navigatori nidificati all'interno di quella scheda di navigazione, quindi cosa stiamo
impostando qui.