1 00:00:02,170 --> 00:00:04,210 Quindi lavoriamo con il navigatore dello stack. 2 00:00:04,210 --> 00:00:06,080 E che dire del sorteggio. 3 00:00:06,100 --> 00:00:08,950 La logica è esattamente la stessa. 4 00:00:08,950 --> 00:00:18,780 Creiamo il nostro negozio disegnare navigatore anno chiamando crea disegnare navigatore e proprio come il navigatore dello stack. 5 00:00:18,780 --> 00:00:21,470 Questa funzione non vuole alcun argomento. 6 00:00:21,480 --> 00:00:28,980 Invece configureremo la nostra navigazione per disegnare in un approccio basato sui componenti o papà creerò un navigatore per negozi qui 7 00:00:28,980 --> 00:00:31,500 e questo sarà un componente di reazione. 8 00:00:31,500 --> 00:00:33,850 Ancora una volta potresti averlo in un file separato. 9 00:00:33,870 --> 00:00:42,210 Terrò tutto in un file per averlo fianco a fianco con il vecchio codice e nel loro ritorno torniamo a disegnare 10 00:00:42,210 --> 00:00:44,160 punto navigatore punto navigatore. 11 00:00:44,160 --> 00:00:48,170 Stessa logica di prima Non importa che sia un pareggio. 12 00:00:48,210 --> 00:00:53,460 E lì ora abbiamo due schermate diverse che possono essere caricate nel navigatore e reagire 13 00:00:53,460 --> 00:00:59,880 alla navigazione assicurerà automaticamente che venga creato un navigatore in modo da poterlo aprire con lo stesso identico 14 00:00:59,880 --> 00:01:03,360 codice che abbiamo usato prima non sarà necessario modificarlo. 15 00:01:03,360 --> 00:01:10,920 Quindi qui ora abbiamo il nostro negozio disegnare lo schermo a punti del navigatore e la giustizia prima di dare a quello schermo un nome. 16 00:01:10,920 --> 00:01:13,190 Qui abbiamo due prodotti per esempio. 17 00:01:13,440 --> 00:01:17,580 E quel nome verrà quindi automaticamente utilizzato all'interno del navigatore di disegni. 18 00:01:17,580 --> 00:01:24,110 Anche se puoi anche sovrascrivere tutto ciò se vuoi e abbiamo bisogno di un componente che viene caricato quando facciamo 19 00:01:24,110 --> 00:01:26,450 clic su quel link nel navigatore. 20 00:01:26,450 --> 00:01:29,270 E qui è ancora Navigator del prodotto. 21 00:01:29,330 --> 00:01:36,660 Quindi, proprio come prima, possiamo utilizzare i nostri navigatori dello stack anche se ora utilizzano questo approccio basato sui componenti 22 00:01:36,660 --> 00:01:43,770 come componenti che dovrebbero essere creati come parte di un altro navigatore in questo caso come parte del navigatore 23 00:01:43,770 --> 00:01:44,920 di disegno. 24 00:01:44,940 --> 00:01:51,380 Possiamo ancora indicare i nostri navigatori dello stack come componenti qui perché sono componenti quest'anno. 25 00:01:51,390 --> 00:01:55,710 Questo è un componente e lo stesso vale per tutti i nostri navigatori. 26 00:01:55,710 --> 00:02:02,130 Creiamo qui tutti i componenti di reazione che mantengono i componenti specifici richiesti dalla logica di navigazione e 27 00:02:03,130 --> 00:02:09,670 i componenti generali come il navigatore dei prodotti qui possono essere utilizzati in un navigatore di disegni, quindi 28 00:02:09,670 --> 00:02:18,940 lo replicherò due volte in modo che possiamo anche aggiungere i nostri ordini qui con il navigatore degli ordini e l'amministratore qui con il navigatore dell'amministratore 29 00:02:19,450 --> 00:02:25,870 e assicurati di non avere errori nei tuoi nomi perché li stiamo usando in tutta l'app e 30 00:02:25,870 --> 00:02:28,820 che la logica non dovrà essere modificata. 31 00:02:28,840 --> 00:02:34,080 Quindi, se si confondono i nomi qui, altre parti dell'app non funzioneranno correttamente. 32 00:02:34,120 --> 00:02:39,710 Quindi ora abbiamo impostato questo navigatore per disegnare e ora per quanto riguarda la configurazione. 33 00:02:39,730 --> 00:02:42,030 Ora ci sono due cose che dobbiamo considerare. 34 00:02:42,100 --> 00:02:46,560 Per uno dobbiamo configurare qui per il contenuto di disegno. 35 00:02:46,570 --> 00:02:52,660 E in secondo luogo vogliamo configurare le nostre diverse schermate come il navigatore del prodotto o il navigatore 36 00:02:52,750 --> 00:02:55,510 dell'ordine per avere le tue icone nel cassetto. 37 00:02:55,510 --> 00:02:57,100 Bene, iniziamo con le icone. 38 00:02:57,160 --> 00:03:02,230 In precedenza abbiamo impostato che posso direttamente nella configurazione dello stack Navigator che 39 00:03:02,230 --> 00:03:06,930 volevamo usare ora in un disegno con l'approccio basato sui componenti. 40 00:03:06,930 --> 00:03:08,420 Non lo facciamo più. 41 00:03:08,430 --> 00:03:17,450 Invece possiamo semplicemente prendere questa parte qui, in realtà siamo questo intero oggetto che abbiamo precedentemente impostato sul navigatore 42 00:03:17,450 --> 00:03:21,440 dello stack e scendiamo al nostro sorteggio. 43 00:03:21,510 --> 00:03:23,870 E ora qui su questa schermata a cui appartiene. 44 00:03:23,870 --> 00:03:26,180 Quindi in questo caso appartiene all'Admin Navigator. 45 00:03:26,180 --> 00:03:34,630 Quindi qui nella schermata di amministrazione passiamo di nuovo le nostre opzioni proprio come abbiamo fatto un secondo vado in pila Navigator. 46 00:03:34,790 --> 00:03:42,230 Quindi qui passiamo ora le opzioni per questa schermata e questo potrebbe essere un componente normale o poiché in questo caso è 47 00:03:42,230 --> 00:03:48,760 un componente con la nostra logica di navigazione dello stack e due opzioni, passiamo un oggetto e lì possiamo 48 00:03:48,770 --> 00:03:51,170 riutilizzare quell'oggetto che abbiamo usato prima. 49 00:03:51,200 --> 00:03:56,060 Quindi un oggetto con un disegno che riesco a capire dove ci viene in mente viene e così via. 50 00:03:56,060 --> 00:04:04,140 Quindi tutto questo funziona bene prima di un piccolo aggiustamento, ma ora abbiamo anche oggetti di scena qui alimentati dalla navigazione 51 00:04:04,140 --> 00:04:12,660 reattiva e questi oggetti di scena avranno un tasto colorato invece di disegnare la tinta attiva e il colore sarà sempre il colore 52 00:04:12,800 --> 00:04:18,470 giusto perché reagisci alla navigazione dietro il le scene controlleranno dove lo fa lo 53 00:04:18,480 --> 00:04:24,200 schermo attualmente attivo o meno e regoleranno i valori memorizzati in quel puntello di colore. 54 00:04:24,240 --> 00:04:26,920 Ho già evidenziato il colore evidenziato già noto. 55 00:04:27,000 --> 00:04:33,250 Quindi questa è una piccola modifica che dobbiamo apportare qui bene e con ciò possiamo copiare la 56 00:04:33,250 --> 00:04:39,250 logica dagli altri navigatori così come dal navigatore dell'ordine prendiamo qui questo oggetto che 57 00:04:39,250 --> 00:04:48,100 avevamo e le sue opzioni di navigazione scendono al sorteggio agli ordini lo schermo aggiunge la chiave di passaggio delle opzioni ed è oggetto 58 00:04:48,100 --> 00:04:57,170 e commento è tornato e importante ora abbiamo oggetti di scena che avranno quel tasto di colore proprio come questo e, ultimo ma non 59 00:04:57,380 --> 00:05:03,470 meno importante, ovviamente lo facciamo anche per la schermata dei prodotti per il navigatore dei prodotti. 60 00:05:03,470 --> 00:05:09,200 Qui abbiamo questo oggetto prendiamolo, andiamo giù per disegnare il nostro 61 00:05:12,050 --> 00:05:18,440 navigatore ed ecco la nostra schermata di impostazione del prodotto il tasto opzioni qui. 62 00:05:18,570 --> 00:05:23,520 L'ho passato e modificato come ho appena mostrato. 63 00:05:23,520 --> 00:05:27,840 Quindi ora abbiamo la nostra configurazione specifica dello schermo qui. 64 00:05:27,840 --> 00:05:35,700 Ora potresti dire che dire del disegno complessivo perché in precedenza nell'app con la vecchia navigazione 65 00:05:35,740 --> 00:05:45,450 di reazione in cui avevamo effettivamente il nostro disegno e configuravamo il colore di tinta attivo e anche il contenuto 66 00:05:45,450 --> 00:05:46,640 del disegno. 67 00:05:46,680 --> 00:05:50,160 Bene, puoi ancora farlo con quel nuovo approccio. 68 00:05:50,340 --> 00:05:58,640 Andiamo al nostro navigatore per disegnare in modo da impostare il navigatore generale e configurarlo tramite oggetti di scena proprio come 69 00:05:58,640 --> 00:05:59,310 prima. 70 00:05:59,340 --> 00:06:06,030 Si tratta di componenti e oggetti di scena, quindi qui ora abbiamo un nome diverso, ma non 71 00:06:06,030 --> 00:06:09,960 abbiamo più opzioni di contenuto e componente di contenuto. 72 00:06:10,020 --> 00:06:11,910 E puoi trovarlo nei documenti ufficiali. 73 00:06:11,970 --> 00:06:17,190 Ora abbiamo disegnare contenuti e disegnare opzioni di contenuto. 74 00:06:17,190 --> 00:06:20,540 Tuttavia, i valori sono esattamente gli stessi alla fine. 75 00:06:20,700 --> 00:06:24,750 Quindi possiamo afferrare il nostro oggetto opzioni di 76 00:06:28,600 --> 00:06:37,820 contenuto qui e in passato come disegnare un contenuto opzioni qui e commentarlo dentro e in avanti per disegnare un contenuto. 77 00:06:37,900 --> 00:06:40,180 È anche quasi lo stesso. 78 00:06:40,180 --> 00:06:42,760 Abbiamo semplicemente avvolto questo componente qui 79 00:06:51,270 --> 00:06:52,880 fino a qui. 80 00:06:53,010 --> 00:06:53,970 Copia 81 00:06:57,260 --> 00:07:03,070 questo e passalo qui per disegnare il contenuto e commentarlo in. 82 00:07:03,080 --> 00:07:07,400 Tuttavia ora due cose importanti che utilizzano questa patch non sono consentite qui. 83 00:07:07,400 --> 00:07:09,490 Dovresti farlo fuori di qui. 84 00:07:09,500 --> 00:07:15,980 Quindi ad esempio qui nel navigatore del negozio annuì il componente annidato. 85 00:07:15,980 --> 00:07:27,910 Inoltre, non è più possibile disegnare elementi, ma disegnare un elenco di elementi che dobbiamo anche importare in alto dal disegno 86 00:07:32,940 --> 00:07:35,730 della barra di riattivazione. 87 00:07:35,730 --> 00:07:37,890 Quindi qui importiamo l'elenco degli elementi di disegno con 88 00:07:40,580 --> 00:07:41,030 esso. 89 00:07:41,030 --> 00:07:49,630 Tuttavia, se scorro verso il basso, questo dovrebbe ora funzionare di nuovo e questo dovrebbe essere il nostro progetto di lavoro, quindi 90 00:07:49,630 --> 00:07:56,830 abbiamo il navigatore del negozio che ha tutti questi navigatori dello stack ciò che rimane ora è quel 91 00:07:56,830 --> 00:08:05,440 navigatore switch che sostanzialmente rende la nostra schermata di avvio o tu spegni schermo o schermo del negozio o fai le tue rispettive 92 00:08:05,440 --> 00:08:07,450 pile di navigazione, dovrei dire. 93 00:08:07,750 --> 00:08:09,940 Bene, questo è ciò su cui lavoreremo dopo.