1 00:00:02,250 --> 00:00:08,640 Voglio iniziare con la forma di navigazione più elementare e anche la forma di navigazione più comune che 2 00:00:08,640 --> 00:00:14,820 hai in qualsiasi app mobile ed è così come andare avanti e indietro tra le schermate e per 3 00:00:14,820 --> 00:00:19,030 questo creerà un cosiddetto stack e navigatore perché pagine o schermate. 4 00:00:19,110 --> 00:00:21,630 Userò queste parole come sinonimi qui. 5 00:00:21,630 --> 00:00:26,040 Quindi le pagine e gli schermi sono sostanzialmente gestiti su una pila di pagine. 6 00:00:26,250 --> 00:00:32,220 E ogni volta che vai su una nuova schermata, questa verrà spinta in cima a quella pila nella schermata più in alto su una 7 00:00:32,220 --> 00:00:34,570 pila che è sempre la schermata che è visibile. 8 00:00:34,650 --> 00:00:39,710 E quando fai clic sul pulsante Indietro viene visualizzato questa schermata in cui ti trovavi viene visualizzato. 9 00:00:39,840 --> 00:00:45,600 E poiché vedrai sempre sull'app la schermata più in alto, vedrai la schermata sotto quella che è la 10 00:00:45,600 --> 00:00:46,950 schermata da cui provieni. 11 00:00:46,950 --> 00:00:49,370 Ecco perché si chiama Stack Navigator. 12 00:00:49,390 --> 00:00:50,490 Questa è la furia. 13 00:00:50,490 --> 00:00:53,100 Usiamolo semplicemente e diventerà molto chiaro. 14 00:00:53,370 --> 00:00:55,080 Abbiamo importato da reagire. 15 00:00:55,080 --> 00:00:59,870 La navigazione e il suo nome erano il nome della funzione. 16 00:00:59,880 --> 00:01:05,550 Abbiamo effettivamente bisogno di creare un tale navigatore dello stack è creare stack navigatore. 17 00:01:05,550 --> 00:01:11,890 Ora una nota importante che questa sintassi è corretta se stai usando la versione di navigazione di reazione gratis se 18 00:01:11,910 --> 00:01:17,880 stai usando l'avversione di navigazione di reazione perché è cambiata leggermente, allora devi installare un pacchetto extra come 19 00:01:17,880 --> 00:01:19,620 menzionato in una lezione prima. 20 00:01:20,700 --> 00:01:29,610 È necessario eseguire npm installa dash dash salva reagisci dash navigazione dash stack e installa questo pacchetto aggiuntivo e con esso installato si importa crea 21 00:01:30,390 --> 00:01:36,990 stack navigator da reagisci come dash dash di navigazione anziché reagire alla navigazione che è una regolazione minore 22 00:01:36,990 --> 00:01:42,900 che non è necessario apportare quattro create stack navigator e quando creiamo i nostri navigatori, ad 23 00:01:42,900 --> 00:01:49,140 esempio i tocchi o disegniamo il navigatore in un secondo momento, avrai i rispettivi pacchetti che devi 24 00:01:49,140 --> 00:01:54,990 installare reagire ai tocchi di navigazione e così via che è tutto coperto nella lezione 25 00:01:55,020 --> 00:01:57,370 che trovi prima di questa lezione. 26 00:01:57,460 --> 00:02:03,150 Ora qui ho registrato questo corso con la versione di navigazione di reazione gratuita che altrimenti è esattamente la 27 00:02:03,150 --> 00:02:03,520 stessa. 28 00:02:03,510 --> 00:02:08,370 È solo l'importazione che differisce e quindi importerò dalla navigazione di reazione qui. 29 00:02:08,430 --> 00:02:14,310 Ma se segui la versione 4, reagisci bash di dash di navigazione con un pacchetto aggiuntivo 30 00:02:14,300 --> 00:02:15,730 che devi installare. 31 00:02:15,870 --> 00:02:22,020 Ecco come funziona la navigazione di reazione che questa libreria crea creando i cosiddetti navigatori che alla 32 00:02:22,030 --> 00:02:30,090 fine si può dire che gli oggetti reagiscono effettivamente ai componenti poiché si scoprirà che contengono tutte le configurazioni di navigazione che 33 00:02:30,090 --> 00:02:34,860 contengono tutte le informazioni di quali schermate diverse hai e quali farà il 34 00:02:34,860 --> 00:02:40,350 duro sollevamento caricando diversi schermi e giocando piacevoli transizioni fluide per passare da A 35 00:02:40,350 --> 00:02:42,270 a B per te. 36 00:02:42,270 --> 00:02:49,710 Quindi dobbiamo importare create stack navigator e quindi possiamo semplicemente chiamare che ora create stack navigator richiede almeno un argomento e 37 00:02:49,710 --> 00:02:56,130 che è un oggetto javascript in cui configuriamo le diverse schermate che vogliamo essere in grado di spostare 38 00:02:56,220 --> 00:03:02,940 tra ora e questa app che desidero per iniziare dalla schermata delle categorie e se tocco una categoria lì 39 00:03:02,940 --> 00:03:09,450 voglio andare alla schermata dei pasti della categoria e se poi tocco una ricetta lì su un pasto, 40 00:03:09,450 --> 00:03:16,530 voglio andare alla schermata dei dettagli del pasto, quindi avremo bisogno di questi tre schermate nel nostro navigatore dello stack 41 00:03:16,770 --> 00:03:23,610 in modo che queste siano le tre schermate tra cui puoi spostarti utilizzando questo modello di stack spingendo le pagine 42 00:03:23,610 --> 00:03:30,300 e saltandole via e perché non abbiamo bisogno di preferiti e filtri perché i filtri verranno aggiunti successivamente con 43 00:03:30,300 --> 00:03:37,350 l'aiuto di una barra laterale sarà un'alternativa a questo stack qui e i preferiti anche come alternativa a questo stack 44 00:03:37,350 --> 00:03:42,960 saremo in grado di andare lì con tocchi in seguito ma non in questo momento. 45 00:03:42,960 --> 00:03:48,990 Cominciamo quindi con questa navigazione di base basata sullo stack in cui possiamo andare avanti e indietro 46 00:03:48,990 --> 00:03:56,850 tra le categorie schermata della schermata pasti della categoria e ti forniremo la schermata dei dettagli che informiamo reagire alla navigazione su 47 00:03:57,180 --> 00:04:05,500 queste tre schermate registrandole come coppie di valori-chiave che prendi qualsiasi identificatore di cui la tua scelta, ad esempio, per le categorie, ma questo 48 00:04:05,530 --> 00:04:11,500 nome dipende da te in quanto una convenzione sul nome della proprietà deve iniziare con un carattere 49 00:04:11,500 --> 00:04:14,470 maiuscolo qui, ma non devi farlo tecnicamente. 50 00:04:14,650 --> 00:04:20,620 Quindi usi qualsiasi identificatore che desideri come nome di proprietà in questo oggetto che 51 00:04:20,740 --> 00:04:29,920 stai passando per creare stack navigator e ora il valore nella sua forma più semplice è semplicemente un puntatore al componente 52 00:04:29,920 --> 00:04:34,690 di reazione che vuoi caricare come schermata per questa schermata. 53 00:04:34,690 --> 00:04:43,890 Quindi nel mio caso quella sarebbe la schermata delle categorie tutte importare questa schermata di tutte le categorie di importazione dalla 54 00:04:44,760 --> 00:04:51,740 schermata delle categorie di schermate che posso importare perché qui è la mia esportazione predefinita. 55 00:04:51,940 --> 00:04:59,410 Quindi ora mappiamo queste due categorie e questo ci permette di dire in seguito alla navigazione di reazione la libreria che 56 00:04:59,410 --> 00:05:02,920 stiamo usando che dovrebbe caricare la schermata della categoria. 57 00:05:02,920 --> 00:05:08,690 Ora, come ho detto, questo non è l'unico schermo di cui ho bisogno, voglio anche avere i pasti della categoria. 58 00:05:08,710 --> 00:05:14,590 Quindi questi sono i sistemi della seconda schermata Questa schermata presenterà tutti i pasti per la categoria scelta 59 00:05:15,310 --> 00:05:21,550 per cui abbiamo un numero di componenti e questa è la schermata dei pasti di categoria che abbiamo preparato che 60 00:05:21,550 --> 00:05:29,680 importiamo dalle schermate della schermata dei pasti di categoria quindi mappiamo quest'anno ora il modo in cui ho detto che questa è la forma più semplice 61 00:05:29,680 --> 00:05:34,720 di mappatura che ha semplicemente il nome della proprietà e quindi un puntatore al componente 62 00:05:35,290 --> 00:05:42,040 che si desidera caricare, inoltre è possibile passare qui l'oggetto e impostare la proprietà dello schermo su questo oggetto e quindi puntare 63 00:05:42,100 --> 00:05:44,470 su il componente che si desidera caricare. 64 00:05:44,470 --> 00:05:46,030 Ora perché dovresti farlo. 65 00:05:46,090 --> 00:05:52,540 Perché ora puoi anche impostare una configurazione aggiuntiva qui oltre allo schermo, potresti impostare alcune opzioni predefinite per lo schermo 66 00:05:52,540 --> 00:05:57,220 e così via, ma questo non è qualcosa di cui dobbiamo preoccuparci in questo 67 00:05:57,730 --> 00:06:02,740 momento, in realtà ci penseremo più avanti in questo modulo voglio solo menzionare che questa 68 00:06:02,740 --> 00:06:08,230 è la scorciatoia, questa è la forma più lunga di dire reagire alla navigazione quali schermate dovrebbero 69 00:06:08,230 --> 00:06:14,170 essere caricate per quale identificatore parlando che abbiamo bisogno di un terzo identificatore ovviamente e questo è l'identificatore 70 00:06:14,170 --> 00:06:21,060 che dovrebbe caricare la nostra schermata dettagliata dai un nome al dettaglio del pasto e voglio indicare la schermata dettagliata del mio 71 00:06:21,090 --> 00:06:29,110 pasto, quindi importerò la schermata del dettaglio del pasto da E ora andiamo nella cartella delle schermate e lì è la schermata dettagliata del pasto 72 00:06:29,150 --> 00:06:31,760 e di nuovo userò il collegamento qui. 73 00:06:31,760 --> 00:06:35,830 Potremmo usare quella forma più lunga ma userò quella scorciatoia nel punto nella schermata dettagliata del pasto. 74 00:06:36,710 --> 00:06:40,370 Quindi, con quella configurazione di base, stiamo dicendo che reagire alla navigazione. 75 00:06:40,370 --> 00:06:49,020 Ehi, questi sono gli schermi che potranno spostarsi tra adesso ma i dati da soli non faranno molto. 76 00:06:49,030 --> 00:06:49,540 Perché. 77 00:06:49,840 --> 00:06:57,600 Perché stiamo creando quel navigatore dello stack ma non stiamo facendo nulla con esso, quindi cambiamo questa creazione del navigatore 78 00:06:58,080 --> 00:07:05,150 dello stack in realtà restituisce un contenitore di navigazione e questo risulta essere un componente di reazione. 79 00:07:05,150 --> 00:07:07,070 È tutto chiamato come navigatore dei pasti. 80 00:07:07,080 --> 00:07:10,620 Sembra un nome appropriato perché è quello che abbiamo alla fine qui. 81 00:07:10,620 --> 00:07:15,570 E ora stiamo memorizzando il componente di reazione creato dallo stack Navigator che è fondamentalmente 82 00:07:15,570 --> 00:07:22,380 un componente di reazione con tutto il pesante sollevamento del caricamento di schermate diverse e la riproduzione di animazioni che questo componente 83 00:07:22,380 --> 00:07:25,160 di reazione è memorizzato nel navigatore dei pasti. 84 00:07:25,170 --> 00:07:32,830 Ora potremmo esportare qui il navigatore dei pasti e provare a usarlo in questo modo e catturarci per renderlo sullo schermo 85 00:07:32,830 --> 00:07:38,410 e vedere cosa succede ma in realtà reagire alla navigazione funziona in modo leggermente diverso. 86 00:07:38,470 --> 00:07:45,350 È inoltre necessario creare un contenitore app in questo contenitore app che è necessario avvolgere il percorso. 87 00:07:45,440 --> 00:07:50,370 Quindi il tuo navigatore principale in questo caso ne abbiamo solo uno, dobbiamo solo impilare Navigator. 88 00:07:50,390 --> 00:07:51,900 Quindi avvolgiamolo con esso. 89 00:07:51,980 --> 00:07:57,740 Spostiamo i pasti nella navigazione o ricreamoli chiamando create container app e quindi passiamo semplicemente 90 00:07:57,740 --> 00:08:01,850 i pasti Navigator come argomento per creare il container app. 91 00:08:01,940 --> 00:08:03,880 Crea anche un contenitore di navigazione. 92 00:08:03,950 --> 00:08:05,670 Quindi ti dà anche un componente di reazione. 93 00:08:05,750 --> 00:08:08,120 Ma questo non è in realtà il componente di reazione. 94 00:08:08,120 --> 00:08:15,890 Dovresti usare il tuo codice ASX perché ora ha tutti i metadati sulla navigazione in generale sulla reazione della 95 00:08:15,890 --> 00:08:17,930 navigazione e così via. 96 00:08:17,930 --> 00:08:24,680 Quindi questo è semplicemente uno schema di cui hai bisogno per avvolgere il tuo percorso con il navigatore più importante con quello e 97 00:08:24,680 --> 00:08:30,260 utilizzare questo componente di reazione al ritorno nel tuo codice J is X, quindi fondamentalmente l'impostazione che avrai sempre 98 00:08:30,260 --> 00:08:35,570 quando lavori con la navigazione di reazione in seguito imparerai anche come utilizzare più navigatori in un'unica app. 99 00:08:35,570 --> 00:08:41,870 A proposito, per ora abbiamo questo ed esportiamo questo componente che la fine crea. 100 00:08:41,870 --> 00:08:44,680 Quindi ora nell'inseguimento delle app possiamo iniziare a utilizzare questo componente. 101 00:08:44,720 --> 00:08:56,720 Quindi abbiamo visto qualcosa sullo schermo per questo andiamo lì e importiamo il navigatore dei pasti dal navigatore dei pasti 102 00:08:56,930 --> 00:08:58,640 di navigazione. 103 00:08:58,640 --> 00:09:04,040 Ora, come ho già detto, il navigatore dei pasti è ora solo un componente di reazione, quindi alla fine quello che 104 00:09:04,040 --> 00:09:08,390 possiamo fare è semplicemente restituirlo invece di restituire la nostra visione con il nostro testo qui. 105 00:09:08,420 --> 00:09:13,550 Restituirò il navigatore dei pasti e dato che è un componente di reazione, posso semplicemente usare 106 00:09:13,550 --> 00:09:18,020 un po 'di codice di Isaac come questo con papà se lo salviamo. 107 00:09:18,160 --> 00:09:20,890 Diamo un'occhiata alla nostra applicazione mentre si ricarica 108 00:09:24,290 --> 00:09:27,040 e potrebbe essere necessario ricaricare manualmente la tua app. 109 00:09:27,040 --> 00:09:33,490 Dovresti vedere la schermata delle categorie una volta ricaricata e questo ovviamente è enorme perché questo 110 00:09:34,000 --> 00:09:35,360 significa che funziona. 111 00:09:35,440 --> 00:09:41,710 Ora per favore nota anche che tutti di default ottengono una bella intestazione che ha la piattaforma 112 00:09:41,710 --> 00:09:49,180 predefinita cerca IO s è pulito piatto ha questa linea sottile sotto di essa per Android è più dimensionale perché ha 113 00:09:49,180 --> 00:09:50,720 tutto una leggera ombra. 114 00:09:50,770 --> 00:09:55,600 Ora ovviamente manca un titolo e imparerai come possiamo aggiungerne uno in questo modulo ma lo 115 00:09:55,600 --> 00:10:01,450 tiriamo fuori dalla scatola e questo rispetta automaticamente tutte le tacche che potresti dover rimanere così lontano che hai qui, 116 00:10:01,450 --> 00:10:07,060 quindi utilizza automaticamente un tale visualizzazione dell'area sicura e questo è tutto ciò che ho menzionato nell'ultimo modulo del 117 00:10:07,060 --> 00:10:12,520 corso mentre hai questo componente e a volte ne hai bisogno, ad esempio quando si crea un'app con 118 00:10:12,520 --> 00:10:19,360 la navigazione reattiva, la navigazione reattiva avvolge già le tue visualizzazioni in una vista area sicura, almeno lo farà molto del lavoro che 119 00:10:19,360 --> 00:10:24,430 dovresti fare altrimenti farà in modo che la tua intestazione abbia un bell'aspetto e questa è una 120 00:10:24,430 --> 00:10:29,890 grande cosa perché la creazione manuale di un'intestazione che sembra buona su tutti i dispositivi è in realtà 121 00:10:29,890 --> 00:10:31,650 un bel po 'di lavoro. 122 00:10:31,840 --> 00:10:33,210 Quindi è quello che arriviamo qui. 123 00:10:33,220 --> 00:10:36,550 La domanda ovvia ora è come possiamo raggiungere le nostre altre schermate.