1 00:00:02,940 --> 00:00:09,450 Quindi aggiungiamo questo ultimo modello di navigazione principale che vedi nelle app mobili e che ha una porta laterale 2 00:00:10,170 --> 00:00:16,000 ovviamente rischia la navigazione come coperta per papà e dalla navigazione reattiva puoi importare creare disegnare e 3 00:00:16,000 --> 00:00:18,740 Navigator che fa esattamente quello che sembra. 4 00:00:18,750 --> 00:00:24,690 Ci semplifica la creazione di questo modello di navigazione basato sul disegno e ci offre un tale disegno e 5 00:00:24,750 --> 00:00:30,870 tutte le funzionalità di cui abbiamo bisogno per controllare la cannuccia fuori dalla scatola, il che è ovviamente molto conveniente. 6 00:00:30,930 --> 00:00:35,060 Quindi creiamo semplicemente un nuovo navigatore e lo farò in fondo a questo file. 7 00:00:35,490 --> 00:00:40,860 E solo una breve nota a margine ovviamente puoi dividerlo in più file e avere 8 00:00:40,890 --> 00:00:46,550 ogni navigatore nel suo file e quindi unirli insieme in un file importandoli in un file centrale. 9 00:00:46,560 --> 00:00:48,120 Questo è qualcosa che potresti fare. 10 00:00:48,120 --> 00:00:51,430 Ho trovato più facile per questo tutorial anche tenere tutto in un unico file. 11 00:00:51,560 --> 00:00:56,070 Troppo grande di un file ma potresti sicuramente dividerlo. 12 00:00:56,340 --> 00:01:01,410 Quindi creerò il mio navigatore per disegnare qui in fondo a questo file e tutto memorizzato in quella costante denominata 13 00:01:01,770 --> 00:01:04,380 Navigatore principale perché alla fine è quello che è. 14 00:01:04,380 --> 00:01:10,470 Questo sarà il nostro principale navigatore alla fine perché la scheda sarà all'interno del sorteggio e il navigatore alla fine 15 00:01:10,470 --> 00:01:11,880 i nostri passi qui. 16 00:01:11,970 --> 00:01:13,190 Quindi su entrambe le schede. 17 00:01:13,200 --> 00:01:19,530 Abbiamo accesso a quel sorteggio laterale e decidiamo che il sorteggio ci consente di passare a uno schermo nuovo di zecca che non farà 18 00:01:19,530 --> 00:01:20,880 parte dei nostri tocchi. 19 00:01:20,910 --> 00:01:25,890 Quindi il navigatore di disegno si trova sopra il navigatore delle schede nella gerarchia. 20 00:01:26,130 --> 00:01:28,680 Quindi, come possiamo configurare un tale navigatore di disegni. 21 00:01:28,830 --> 00:01:32,070 Fondamentalmente proprio come abbiamo fatto prima ci vogliono due argomenti. 22 00:01:32,070 --> 00:01:37,950 Il primo argomento è un oggetto in cui configuriamo gli schermi per la giustizia del 23 00:01:37,950 --> 00:01:46,350 navigatore distruttore prima di avere identificatori come rubinetti o piatti preferiti qualunque sia il navigatore adatto per quella prima voce del cassetto 24 00:01:46,350 --> 00:01:47,570 che vuoi avere. 25 00:01:47,850 --> 00:01:54,780 E qui voglio puntare ancora sul navigatore del padre dei miei pasti perché è quello che voglio caricare lì e su 26 00:01:54,780 --> 00:02:02,460 una seconda voce è la schermata dei filtri che non dobbiamo dimenticare che abbiamo un'altra schermata che è la schermata dei filtri che 27 00:02:02,460 --> 00:02:08,550 non abbiamo usato prima d'ora come è tempo di brillare e in realtà tutto avvolto come in un 28 00:02:08,550 --> 00:02:11,130 navigatore dello stack anche se sarà vuoto. 29 00:02:11,130 --> 00:02:13,850 Quindi abbiamo anche avuto un colpo di testa lì. 30 00:02:14,130 --> 00:02:20,370 Quindi aggiungerò qui un altro navigatore dello stack con Crea stack navigatore. 31 00:02:20,370 --> 00:02:22,130 È uno stack molto semplice. 32 00:02:22,290 --> 00:02:26,670 Avrà solo una schermata e quella sarà la schermata dei filtri che dovrebbe quindi essere importata 33 00:02:26,670 --> 00:02:29,190 qui in alto perché non lo stiamo ancora facendo. 34 00:02:29,340 --> 00:02:38,670 Importiamo la schermata dei filtri qui dalla schermata dei filtri delle schermate e ora possiamo usare la schermata dei filtri nel loro sito Web non 35 00:02:38,720 --> 00:02:47,600 qui, ma qui nello stack navigator e denominata is filter navigator leggi qualcosa del genere e ora è questo filtri Navigator che può 36 00:02:47,600 --> 00:02:54,450 mappare i filtri in il mio navigatore dei cassetti e io uso solo un navigatore dello stack qui 37 00:02:54,450 --> 00:02:59,790 in modo che abbiano anche un'intestazione lì e per nessun altro motivo ora sullo 38 00:02:59,790 --> 00:03:04,260 schermo del filtro funzionerà ovviamente su questo in un secondo, ma 39 00:03:04,260 --> 00:03:12,810 lì c'è una cosa che voglio fare subito aggiungerò le mie opzioni di navigazione e aggiungerò lì un titolo di intestazione e 40 00:03:15,280 --> 00:03:24,840 lo imposterò per filtrare o filtrare i pasti qualcosa del genere con quello indietro al navigatore dei pasti stiamo creando quello stack stiamo assegnando i 41 00:03:24,840 --> 00:03:31,050 navigatori dello stack dei navigatori dei filtri al nostro navigatore dei disegni e ora non ci 42 00:03:31,050 --> 00:03:40,270 resta che usare il navigatore principale qui nel nostro contenitore di app per iniziare con il debito e ora se salviamo questo non vediamo 43 00:03:40,270 --> 00:03:41,350 nulla però. 44 00:03:41,350 --> 00:03:47,380 Bene, ho detto che il navigatore del sorteggio gestirà tutta la logica per aprirla, e 45 00:03:47,380 --> 00:03:56,020 ciò che non fa per noi automaticamente è mostrare un'icona di menu in modo che non mostri un pulsante hamburger per noi. 46 00:03:56,020 --> 00:03:59,710 È qualcosa che dobbiamo fare e possiamo decidere su quali schermi mostrarlo. 47 00:03:59,710 --> 00:04:04,600 E naturalmente quella sarebbe la schermata della categoria perché è la schermata principale per la scheda dei 48 00:04:04,600 --> 00:04:09,320 pasti e la schermata preferita perché è la schermata principale per la sua scheda dei preferiti. 49 00:04:09,340 --> 00:04:15,880 Quindi in queste due schermate voglio aggiungere l'icona di quel menu e la aggiungo nelle mie opzioni di navigazione 50 00:04:15,910 --> 00:04:20,390 come hai appreso perché lì voglio aggiungerlo con l'aiuto dell'intestazione a sinistra. 51 00:04:20,410 --> 00:04:26,620 In precedenza avevamo il diritto di aggiungere azioni alla barra di navigazione nell'intestazione, ma quel pulsante di menu in genere si 52 00:04:26,620 --> 00:04:29,070 trova sulla sinistra per essere aggiunto qui. 53 00:04:29,350 --> 00:04:32,810 E userò i miei pulsanti di intestazione per questo. 54 00:04:32,920 --> 00:04:37,480 Quindi importeremo dai pulsanti di intestazione di navigazione reattivi. 55 00:04:37,480 --> 00:04:44,970 Questo pacchetto che abbiamo usato in precedenza da lì importerò i pulsanti di intestazione e anche l'elemento che tutti noi usiamo prima e 56 00:04:47,490 --> 00:04:50,280 importerò anche il mio pulsante di intestazione personalizzato. 57 00:04:50,280 --> 00:04:57,660 Quindi pulsante di intestazione dal pulsante di intestazione dei componenti, quindi lo stesso modello che abbiamo usato prima per aggiungere quella stella 58 00:04:57,690 --> 00:04:59,730 che posso davvero barra di azione. 59 00:04:59,730 --> 00:05:06,330 Ora lo farò qui per l'icona del menu per il pulsante del menu e quindi 60 00:05:06,360 --> 00:05:18,000 ora possiamo andare a sinistra e i loro pulsanti di intestazione dell'annuncio quest'anno come componente impostare il componente del pulsante di intestazione sul nostro componente del pulsante di 61 00:05:18,000 --> 00:05:18,500 intestazione. 62 00:05:18,510 --> 00:05:23,610 Stiamo importando dal nostro componente personalizzato e aggiungiamo un elemento che ci consente di definire 63 00:05:23,610 --> 00:05:28,420 il titolo che dovrebbe essere menu e quindi, cosa molto importante, posso nominare. 64 00:05:28,560 --> 00:05:31,560 E lì puoi usare il menu IOW. 65 00:05:31,560 --> 00:05:36,570 E comunque puoi sempre usare l'API della piattaforma qui per usare un'icona diversa per Android 66 00:05:36,570 --> 00:05:38,640 e per ISIS se vuoi. 67 00:05:38,640 --> 00:05:44,910 E, ultimo ma non meno importante, tutti i componenti aggiuntivi premono per fare qualcosa quando vengono premuti i pulsanti morti. 68 00:05:44,910 --> 00:05:52,200 E ora questo dovrebbe rendere un pulsante del menu dall'aspetto piacevole qui su quello schermo e in effetti lo vediamo qui su 69 00:05:52,830 --> 00:05:53,600 di noi. 70 00:05:53,640 --> 00:05:55,730 E lo vediamo anche su Android. 71 00:05:55,740 --> 00:06:00,040 Ora di nuovo se vuoi un'icona diversa su Android che assomigli di più a una tipica icona Android. 72 00:06:00,090 --> 00:06:05,550 Lo stesso vale per i tocchi dal modo in cui è possibile utilizzare l'API della piattaforma per rendere lì un'icona 73 00:06:06,350 --> 00:06:09,680 diversa per risparmiare un po 'di tempo, userò le stesse icone. 74 00:06:09,720 --> 00:06:11,910 Quindi è così che visualizziamo l'icona. 75 00:06:11,910 --> 00:06:18,360 Come abbiamo ora aperto un sorteggio, anche se per questo abbiamo bisogno dell'accesso al puntello di navigazione e non 76 00:06:18,360 --> 00:06:21,420 abbiamo tale accesso nelle opzioni di navigazione come questa. 77 00:06:21,420 --> 00:06:27,330 Ma ovviamente abbiamo appreso in precedenza che è possibile utilizzare il modulo di funzione qui dove è possibile ottenere i dati di 78 00:06:27,330 --> 00:06:27,680 navigazione. 79 00:06:27,690 --> 00:06:33,180 In questa funzione si potrebbe dire che è necessario restituire l'oggetto di configurazione. 80 00:06:33,180 --> 00:06:36,720 Quindi qui devi restituire un oggetto alla fine. 81 00:06:36,930 --> 00:06:40,170 E ora i dati di navigazione hanno un tale supporto di navigazione. 82 00:06:40,170 --> 00:06:46,380 Quindi ora qui sulla stampa possiamo dire che il punto di navigazione dei dati di navigazione papà sarà ora disponibile che 83 00:06:46,380 --> 00:06:50,350 è fornito dalla navigazione di reazione che esegue questa funzione alla fine. 84 00:06:50,550 --> 00:06:54,030 E lì avrai un metodo di attivazione / disattivazione. 85 00:06:54,030 --> 00:06:59,850 Avresti anche un disegno aperto se sai che vuoi solo aprirlo ma attiva / disattiva il disegno lo aprirà se è 86 00:06:59,850 --> 00:07:01,890 chiuso e lo chiuderà se è aperto. 87 00:07:01,890 --> 00:07:06,440 Quindi qui devi attivare il disegno e il trattino dovrebbe aprire il menu laterale. 88 00:07:06,440 --> 00:07:12,570 Quindi, se salviamo che ora effettivamente il cassetto si apre, possiamo lavorare sullo stile e sul 89 00:07:12,570 --> 00:07:20,890 testo che vediamo qui tra un secondo, ma è così che puoi aprire quel cassetto ora prima di occuparci di come appare qui. 90 00:07:20,930 --> 00:07:22,690 Assicuriamoci di dire uno dei preferiti. 91 00:07:22,700 --> 00:07:27,050 E ovviamente puoi depositare tutti un video e farlo da solo qui perché i passaggi 92 00:07:27,050 --> 00:07:29,570 saranno gli stessi delle categorie di pasti qui. 93 00:07:29,570 --> 00:07:34,430 È una buona pratica da offrire, ma dopo questa breve pausa devi passare questo video, 94 00:07:36,210 --> 00:07:38,520 lo faremo insieme così avrai avuto successo. 95 00:07:38,520 --> 00:07:46,400 Facciamolo insieme e alla fine si tratta solo di copiare questa impostazione qui schermata Preferiti 2D, quindi copierò l'intera configurazione delle opzioni 96 00:07:47,060 --> 00:07:53,210 di navigazione dalla schermata delle categorie alla schermata dei preferiti e sostituirò la mia opzione di navigazione 97 00:07:53,660 --> 00:07:58,760 con essa ovviamente significa che io dobbiamo rinominarci qui nella schermata dei preferiti 98 00:07:58,760 --> 00:08:05,450 e qui cambiare il titolo di nuovo nei tuoi preferiti, ma ora ho già questa funzione di creazione 99 00:08:05,450 --> 00:08:12,130 dinamica delle opzioni di navigazione qui dove devo attivare / disattivare la chiamata di disegno qui l'icona che 100 00:08:12,170 --> 00:08:17,720 quando usa lo stesso dobbiamo solo fare sicuramente importiamo tutte le cose che dobbiamo importare 101 00:08:17,720 --> 00:08:25,100 e per papà possiamo prendere le importazioni qui dalla schermata delle categorie, nonché dal pacchetto di navigazione reagire o dai pulsanti. 102 00:08:25,100 --> 00:08:27,020 E dal nostro pulsante di intestazione. 103 00:08:27,020 --> 00:08:34,920 Prendi questo e aggiunto qui sulla schermata preferita ora con Papà se abbiamo salvato come dovrebbe essere tutto ora sulla schermata preferita 104 00:08:34,930 --> 00:08:41,100 dobbiamo anche disegnare e puoi aprirlo anche lì non possiamo semplicemente aprirlo a modo se clicchiamo su 105 00:08:41,120 --> 00:08:46,180 ruolo dei filtri da inserire nella schermata del filtro in questo momento non abbiamo 106 00:08:46,180 --> 00:08:52,160 un modo per tornare indietro ma in realtà è qualcosa che possiamo tutti risolvere immediatamente a 107 00:08:52,220 --> 00:09:02,560 causa della schermata del filtro Voglio semplicemente anche avere un disegno in alto, quindi sul schermata del filtro Aggiungerò anche le mie importazioni qui I pulsanti di intestazione di 108 00:09:02,680 --> 00:09:07,280 Whip finiscono e quindi tutte le opzioni di navigazione aggiunte qui. 109 00:09:07,570 --> 00:09:13,780 Quindi copia le opzioni di navigazione dalla schermata preferita questa funzione dinamica e aggiungila alla schermata dei 110 00:09:13,840 --> 00:09:19,900 filtri e sostituisci ovviamente la scala delle opzioni di navigazione, quindi cambia di nuovo quest'anno alla schermata 111 00:09:19,960 --> 00:09:27,730 dei filtri e cambia di nuovo al titolo per filtrare i pasti o quello che vuoi qui e con ciò dovremmo anche 112 00:09:27,940 --> 00:09:34,600 disegnare sullo schermo del filtro e questo ci consente di tornare ai nostri pasti ora, però mancano un paio 113 00:09:34,600 --> 00:09:35,580 di cose. 114 00:09:35,620 --> 00:09:40,870 Ad esempio, nella schermata del filtro l'intestazione sembra totalmente diversa e quindi qui su Android non 115 00:09:40,870 --> 00:09:46,930 riesco nemmeno a vedere il mio pulsante perché è bianco il testo qui non è il testo che 116 00:09:46,930 --> 00:09:55,570 voglio visualizzare Voglio anche usare colori diversi qui forse caratteri diversi quindi c'è ancora del lavoro da fare ma è stata aggiunta la funzionalità di disegno 117 00:09:55,720 --> 00:09:59,820 di base e come si vede di nuovo con pochissimo sforzo. 118 00:09:59,890 --> 00:10:03,550 Quindi ora occupiamoci dello stile del disegno e di quello dei filtri.