Cominciamo con lo styling del cassetto sullo schermo dei
filtri, non è
difficile, è qualcosa che abbiamo fatto prima. Nel navigatore filtri qui nel
navigatore dello stack, alla fine non ci resta che impostare le opzioni di navigazione predefinite
che utilizziamo anche per il navigatore preferito nel nostro navigatore pasti. Quindi possiamo semplicemente copiare questo secondo oggetto di configurazione qui
e aggiungerlo sul nostro navigatore di filtri qui come secondo argomento per creare stack navigator.
Ovviamente, possiamo rimuovere quella linea commentata ma
con questa semplice modifica, ci stiamo assicurando che stiamo usando la stessa barra di navigazione o lo stesso stile della barra
delle azioni qui.
Quindi questo è un cambiamento semplice ma utile, ora per il cassetto stesso, che dire
di questo aspetto qui e dello stile del cassetto?
Ora per uno, puoi se vuoi controllare l'intero cassetto e cambiare il modo in cui gli elementi sono disposti lì e non usare questo
valore predefinito di avere un elenco con effetto a catena qui su Android e un effetto diverso su
iOS, ma
penso che sia un bel default che in realtà non voglio cambiare.
Se lo desideri, puoi comunque sostituire l'intero componente che viene visualizzato qui e allegato, troverai un link
ai documenti ufficiali dove puoi saperne di più su questo nel caso in cui sia
necessario personalizzarlo.
Quello che ovviamente voglio cambiare è lo stile di questi elementi e il testo che viene visualizzato qui.
Ora non è
troppo difficile, iniziamo con il testo. Come testo, come puoi vedere, per impostazione predefinita prende
questi identificatori qui, filtri preferiti pasti.
Ora, naturalmente, può farlo, ma i preferiti dei pasti, non è proprio
un testo che vogliamo mostrare ai nostri utenti.
Pertanto, voglio sovrascrivere questo e possiamo farlo con le vecchie buone opzioni di navigazione che, proprio
come prima con le schede in cui potremmo anche controllare il testo dell'etichetta, dobbiamo impostare i nostri navigatori dello
stack, sia quando creiamo il Stack Navigator, oltre a impostare le opzioni di navigazione predefinite per ogni schermata in
quel navigatore, possiamo impostare le opzioni di navigazione per l'intero navigatore stesso che non è quindi
per le schermate nel navigatore ma per il navigatore quando viene utilizzato come schermata
che è
ciò che noi facendo qui e poi qui potremmo impostare un'etichetta per il cassetto e impostarla su filtri con un paio di punti esclamativi
solo in modo da vedere che questo
ha un effetto, ora vediamo
che qui, quindi è lì che possiamo impostare questo, un'opzione.
In alternativa qui quando creiamo il navigatore dei cassetti, possiamo usare quella forma più lunga in
cui impostiamo una schermata e in cui impostiamo qui le opzioni di navigazione e queste
sono semplicemente delle alternative in
cui nessuna delle
due è migliore o peggiore, è possibile utilizzare uno dei loro e ora qui, imposterò l'etichetta del
cassetto ai pasti, diciamo, che ha più senso per me dei piatti preferiti.
Quindi, se adesso apro il cassetto, vedo pasti e filtri. Per i filtri, ora non ho ignorato il
titolo perché sto bene con il valore predefinito di prendere il mio
identificatore, ma per i pasti l'ho ignorato.
E per quanto riguarda lo stile, il colore e così via?
Bene, ovviamente, anche questo può essere controllato. Bene, come in precedenza, ad esempio con le schede in cui
potremmo anche passare un secondo argomento per creare un navigatore per schede in basso per controllare il layout e lo
stile delle
schede in generale, possiamo fare lo stesso per il cassetto. Per creare il navigatore dei cassetti, possiamo passare un secondo argomento
che è un oggetto configurato per il navigatore dei cassetti stesso e
lì, otteniamo un paio di opzioni.
Ancora una volta, i documenti ufficiali ti offrono un elenco esaustivo di tutto ciò che
puoi configurare, ad esempio hai le tue opzioni di contenuto che ti consentono di controllare il contenuto
nel cassetto, quindi gli elementi del cassetto fino alla fine e lì, hai un sacco di
impostazioni che puoi configurare, ad esempio puoi impostare un colore di tinta attivo che è fondamentalmente quello di colorare un elemento
quando è attivo e lì, possiamo impostarlo su colori, colore accento se vogliamo, invece di usare quel blu predefinito e
quindi
ora questo è arancione ed è così facile cambiarlo, questo è tutto ciò che dobbiamo fare.
Ora, se vogliamo anche cambiare il carattere
utilizzato lì, possiamo farlo anche noi. Oltre a impostare un colore di tinta attivo qui sulle opzioni
di contenuto, possiamo impostare
uno stile di etichetta qui e che accetta un oggetto di stile che verrà applicato al componente
di testo sottostante nel cassetto, in modo da poter impostare
cose come il testo allineare lì se vogliamo o nel mio caso qui, semplicemente impostare la famiglia di caratteri e impostarlo su open sans, forse in questo
modo, nemmeno la versione in grassetto. Se lo facciamo, vediamo chiaramente una differenza.
Ora lo riporterò in grassetto in realtà perché è più bello, ma per vedere una
differenza, penso che fosse chiaro senza grassetto.
Quindi ora stiamo usando il
nostro font qui, la versione in grassetto
e il
nostro colore e questo è abbastanza carino direi, lo stesso ovviamente funziona anche su Android.
Questo è il modo in cui puoi lavorare con il tuo cassetto, come puoi
anche dare uno stile a tutto ciò che è lì
e con ciò, hai imparato a conoscere i principali modelli di navigazione che puoi aggiungere alla tua app con
l'aiuto della navigazione React.
Ora ovviamente, come ho sottolineato più volte in questo modulo, c'è molto da configurare, tutti questi navigatori
hanno diverse opzioni e impostazioni di navigazione per i navigatori stessi e quindi sicuramente
dai un'occhiata ai documenti ufficiali e semplicemente gioca con le diverse impostazioni che
vedi lì sperimenta cosa puoi fare. Le cose che ho mostrato qui e le cose che abbiamo cambiato qui
sono probabilmente le cose comuni che vuoi personalizzare ed è per questo che le
ho mostrate qui, ma di nuovo
c'è molto da fare, dai un'occhiata ai documenti ufficiali. Per questa app, la parte
di navigazione è praticamente fatta, non c'è molto
altro da aggiungere, ora è il
momento di rivisitare lo stile generale, ad esempio assicurati di
usare i caratteri giusti ovunque, anche nelle schede e nell'intestazione e per esempio anche per il testo
qui che non siamo attualmente e quindi riempire anche il
resto dell'app con un po 'di carne. Ad esempio la pagina dei dettagli qui che al
momento ha ancora dei contenuti fittizi e anche la nostra pagina dei filtri che ha anche dei contenuti fittizi.
Questo è quello che farò nel resto
di questo modulo, in seguito nel modulo successivo, ci assicureremo anche di aggiungere più logica e che, ad esempio,
possiamo contrassegnare qualcosa come preferito e quindi quindi aggiungerlo ai preferiti scheda che al momento non funziona.
Ma per ora, finiamo lo stile e aggiungiamo il resto del layout e dei contenuti a questa app.