1 00:00:02,280 --> 00:00:05,200 Cominciamo con lo styling del cassetto sullo schermo dei 2 00:00:05,220 --> 00:00:06,560 filtri, non è 3 00:00:06,570 --> 00:00:11,080 difficile, è qualcosa che abbiamo fatto prima. Nel navigatore filtri qui nel 4 00:00:11,100 --> 00:00:16,500 navigatore dello stack, alla fine non ci resta che impostare le opzioni di navigazione predefinite 5 00:00:16,500 --> 00:00:24,090 che utilizziamo anche per il navigatore preferito nel nostro navigatore pasti. Quindi possiamo semplicemente copiare questo secondo oggetto di configurazione qui 6 00:00:24,090 --> 00:00:29,270 e aggiungerlo sul nostro navigatore di filtri qui come secondo argomento per creare stack navigator. 7 00:00:29,350 --> 00:00:31,870 Ovviamente, possiamo rimuovere quella linea commentata ma 8 00:00:31,870 --> 00:00:39,220 con questa semplice modifica, ci stiamo assicurando che stiamo usando la stessa barra di navigazione o lo stesso stile della barra 9 00:00:39,220 --> 00:00:40,450 delle azioni qui. 10 00:00:40,450 --> 00:00:45,580 Quindi questo è un cambiamento semplice ma utile, ora per il cassetto stesso, che dire 11 00:00:45,580 --> 00:00:48,770 di questo aspetto qui e dello stile del cassetto? 12 00:00:48,780 --> 00:00:55,690 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 13 00:00:55,990 --> 00:01:01,120 valore predefinito di avere un elenco con effetto a catena qui su Android e un effetto diverso su 14 00:01:01,120 --> 00:01:01,910 iOS, ma 15 00:01:02,050 --> 00:01:05,680 penso che sia un bel default che in realtà non voglio cambiare. 16 00:01:05,710 --> 00:01:10,930 Se lo desideri, puoi comunque sostituire l'intero componente che viene visualizzato qui e allegato, troverai un link 17 00:01:10,930 --> 00:01:15,850 ai documenti ufficiali dove puoi saperne di più su questo nel caso in cui sia 18 00:01:15,850 --> 00:01:16,510 necessario personalizzarlo. 19 00:01:16,780 --> 00:01:25,050 Quello che ovviamente voglio cambiare è lo stile di questi elementi e il testo che viene visualizzato qui. 20 00:01:25,060 --> 00:01:26,550 Ora non è 21 00:01:26,590 --> 00:01:32,500 troppo difficile, iniziamo con il testo. Come testo, come puoi vedere, per impostazione predefinita prende 22 00:01:32,530 --> 00:01:34,550 questi identificatori qui, filtri preferiti pasti. 23 00:01:34,570 --> 00:01:39,020 Ora, naturalmente, può farlo, ma i preferiti dei pasti, non è proprio 24 00:01:39,040 --> 00:01:42,250 un testo che vogliamo mostrare ai nostri utenti. 25 00:01:42,250 --> 00:01:47,540 Pertanto, voglio sovrascrivere questo e possiamo farlo con le vecchie buone opzioni di navigazione che, proprio 26 00:01:47,560 --> 00:01:53,920 come prima con le schede in cui potremmo anche controllare il testo dell'etichetta, dobbiamo impostare i nostri navigatori dello 27 00:01:54,160 --> 00:02:00,460 stack, sia quando creiamo il Stack Navigator, oltre a impostare le opzioni di navigazione predefinite per ogni schermata in 28 00:02:00,460 --> 00:02:05,690 quel navigatore, possiamo impostare le opzioni di navigazione per l'intero navigatore stesso che non è quindi 29 00:02:05,700 --> 00:02:10,510 per le schermate nel navigatore ma per il navigatore quando viene utilizzato come schermata 30 00:02:10,510 --> 00:02:11,500 che è 31 00:02:11,740 --> 00:02:19,570 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 32 00:02:19,570 --> 00:02:22,100 solo in modo da vedere che questo 33 00:02:22,150 --> 00:02:23,720 ha un effetto, ora vediamo 34 00:02:23,770 --> 00:02:27,220 che qui, quindi è lì che possiamo impostare questo, un'opzione. 35 00:02:27,220 --> 00:02:32,800 In alternativa qui quando creiamo il navigatore dei cassetti, possiamo usare quella forma più lunga in 36 00:02:32,800 --> 00:02:38,260 cui impostiamo una schermata e in cui impostiamo qui le opzioni di navigazione e queste 37 00:02:38,590 --> 00:02:40,230 sono semplicemente delle alternative in 38 00:02:40,240 --> 00:02:41,830 cui nessuna delle 39 00:02:41,980 --> 00:02:47,840 due è migliore o peggiore, è possibile utilizzare uno dei loro e ora qui, imposterò l'etichetta del 40 00:02:47,840 --> 00:02:52,760 cassetto ai pasti, diciamo, che ha più senso per me dei piatti preferiti. 41 00:02:53,600 --> 00:02:58,670 Quindi, se adesso apro il cassetto, vedo pasti e filtri. Per i filtri, ora non ho ignorato il 42 00:02:58,670 --> 00:03:02,100 titolo perché sto bene con il valore predefinito di prendere il mio 43 00:03:02,240 --> 00:03:04,580 identificatore, ma per i pasti l'ho ignorato. 44 00:03:04,580 --> 00:03:08,420 E per quanto riguarda lo stile, il colore e così via? 45 00:03:08,420 --> 00:03:15,020 Bene, ovviamente, anche questo può essere controllato. Bene, come in precedenza, ad esempio con le schede in cui 46 00:03:15,020 --> 00:03:21,260 potremmo anche passare un secondo argomento per creare un navigatore per schede in basso per controllare il layout e lo 47 00:03:21,260 --> 00:03:22,130 stile delle 48 00:03:22,130 --> 00:03:28,190 schede in generale, possiamo fare lo stesso per il cassetto. Per creare il navigatore dei cassetti, possiamo passare un secondo argomento 49 00:03:28,220 --> 00:03:31,320 che è un oggetto configurato per il navigatore dei cassetti stesso e 50 00:03:31,550 --> 00:03:33,290 lì, otteniamo un paio di opzioni. 51 00:03:33,320 --> 00:03:37,880 Ancora una volta, i documenti ufficiali ti offrono un elenco esaustivo di tutto ciò che 52 00:03:37,880 --> 00:03:42,980 puoi configurare, ad esempio hai le tue opzioni di contenuto che ti consentono di controllare il contenuto 53 00:03:42,980 --> 00:03:47,730 nel cassetto, quindi gli elementi del cassetto fino alla fine e lì, hai un sacco di 54 00:03:47,930 --> 00:03:53,960 impostazioni che puoi configurare, ad esempio puoi impostare un colore di tinta attivo che è fondamentalmente quello di colorare un elemento 55 00:03:54,090 --> 00:03:59,870 quando è attivo e lì, possiamo impostarlo su colori, colore accento se vogliamo, invece di usare quel blu predefinito e 56 00:03:59,870 --> 00:04:00,320 quindi 57 00:04:00,320 --> 00:04:05,170 ora questo è arancione ed è così facile cambiarlo, questo è tutto ciò che dobbiamo fare. 58 00:04:05,330 --> 00:04:08,980 Ora, se vogliamo anche cambiare il carattere 59 00:04:09,080 --> 00:04:15,710 utilizzato lì, possiamo farlo anche noi. Oltre a impostare un colore di tinta attivo qui sulle opzioni 60 00:04:15,710 --> 00:04:17,120 di contenuto, possiamo impostare 61 00:04:17,120 --> 00:04:22,010 uno stile di etichetta qui e che accetta un oggetto di stile che verrà applicato al componente 62 00:04:22,010 --> 00:04:24,810 di testo sottostante nel cassetto, in modo da poter impostare 63 00:04:24,950 --> 00:04:32,870 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 64 00:04:32,870 --> 00:04:36,550 modo, nemmeno la versione in grassetto. Se lo facciamo, vediamo chiaramente una differenza. 65 00:04:36,550 --> 00:04:40,790 Ora lo riporterò in grassetto in realtà perché è più bello, ma per vedere una 66 00:04:40,880 --> 00:04:42,890 differenza, penso che fosse chiaro senza grassetto. 67 00:04:42,920 --> 00:04:44,950 Quindi ora stiamo usando il 68 00:04:44,960 --> 00:04:47,570 nostro font qui, la versione in grassetto 69 00:04:47,570 --> 00:04:48,530 e il 70 00:04:48,530 --> 00:04:54,130 nostro colore e questo è abbastanza carino direi, lo stesso ovviamente funziona anche su Android. 71 00:04:54,170 --> 00:04:58,460 Questo è il modo in cui puoi lavorare con il tuo cassetto, come puoi 72 00:04:58,460 --> 00:05:01,700 anche dare uno stile a tutto ciò che è lì 73 00:05:01,940 --> 00:05:07,850 e con ciò, hai imparato a conoscere i principali modelli di navigazione che puoi aggiungere alla tua app con 74 00:05:07,850 --> 00:05:09,270 l'aiuto della navigazione React. 75 00:05:09,290 --> 00:05:15,770 Ora ovviamente, come ho sottolineato più volte in questo modulo, c'è molto da configurare, tutti questi navigatori 76 00:05:15,770 --> 00:05:20,990 hanno diverse opzioni e impostazioni di navigazione per i navigatori stessi e quindi sicuramente 77 00:05:20,990 --> 00:05:26,060 dai un'occhiata ai documenti ufficiali e semplicemente gioca con le diverse impostazioni che 78 00:05:26,060 --> 00:05:31,820 vedi lì sperimenta cosa puoi fare. Le cose che ho mostrato qui e le cose che abbiamo cambiato qui 79 00:05:31,820 --> 00:05:35,000 sono probabilmente le cose comuni che vuoi personalizzare ed è per questo che le 80 00:05:35,090 --> 00:05:36,580 ho mostrate qui, ma di nuovo 81 00:05:36,590 --> 00:05:40,950 c'è molto da fare, dai un'occhiata ai documenti ufficiali. Per questa app, la parte 82 00:05:40,970 --> 00:05:43,960 di navigazione è praticamente fatta, non c'è molto 83 00:05:43,970 --> 00:05:46,410 altro da aggiungere, ora è il 84 00:05:46,430 --> 00:05:50,360 momento di rivisitare lo stile generale, ad esempio assicurati di 85 00:05:50,360 --> 00:05:56,600 usare i caratteri giusti ovunque, anche nelle schede e nell'intestazione e per esempio anche per il testo 86 00:05:56,660 --> 00:06:00,590 qui che non siamo attualmente e quindi riempire anche il 87 00:06:00,590 --> 00:06:06,050 resto dell'app con un po 'di carne. Ad esempio la pagina dei dettagli qui che al 88 00:06:06,050 --> 00:06:11,810 momento ha ancora dei contenuti fittizi e anche la nostra pagina dei filtri che ha anche dei contenuti fittizi. 89 00:06:11,810 --> 00:06:14,290 Questo è quello che farò nel resto 90 00:06:14,330 --> 00:06:20,330 di questo modulo, in seguito nel modulo successivo, ci assicureremo anche di aggiungere più logica e che, ad esempio, 91 00:06:20,330 --> 00:06:25,700 possiamo contrassegnare qualcosa come preferito e quindi quindi aggiungerlo ai preferiti scheda che al momento non funziona. 92 00:06:25,910 --> 00:06:30,470 Ma per ora, finiamo lo stile e aggiungiamo il resto del layout e dei contenuti a questa app.