Voglio iniziare con la forma di navigazione più elementare e anche la forma di navigazione più comune che
hai in qualsiasi app mobile ed è così come andare avanti e indietro tra le schermate e per
questo creerà un cosiddetto stack e navigatore perché pagine o schermate.
Userò queste parole come sinonimi qui.
Quindi le pagine e gli schermi sono sostanzialmente gestiti su una pila di pagine.
E ogni volta che vai su una nuova schermata, questa verrà spinta in cima a quella pila nella schermata più in alto su una
pila che è sempre la schermata che è visibile.
E quando fai clic sul pulsante Indietro viene visualizzato questa schermata in cui ti trovavi viene visualizzato.
E poiché vedrai sempre sull'app la schermata più in alto, vedrai la schermata sotto quella che è la
schermata da cui provieni.
Ecco perché si chiama Stack Navigator.
Questa è la furia.
Usiamolo semplicemente e diventerà molto chiaro.
Abbiamo importato da reagire.
La navigazione e il suo nome erano il nome della funzione.
Abbiamo effettivamente bisogno di creare un tale navigatore dello stack è creare stack navigatore.
Ora una nota importante che questa sintassi è corretta se stai usando la versione di navigazione di reazione gratis se
stai usando l'avversione di navigazione di reazione perché è cambiata leggermente, allora devi installare un pacchetto extra come
menzionato in una lezione prima.
È necessario eseguire npm installa dash dash salva reagisci dash navigazione dash stack e installa questo pacchetto aggiuntivo e con esso installato si importa crea
stack navigator da reagisci come dash dash di navigazione anziché reagire alla navigazione che è una regolazione minore
che non è necessario apportare quattro create stack navigator e quando creiamo i nostri navigatori, ad
esempio i tocchi o disegniamo il navigatore in un secondo momento, avrai i rispettivi pacchetti che devi
installare reagire ai tocchi di navigazione e così via che è tutto coperto nella lezione
che trovi prima di questa lezione.
Ora qui ho registrato questo corso con la versione di navigazione di reazione gratuita che altrimenti è esattamente la
stessa.
È solo l'importazione che differisce e quindi importerò dalla navigazione di reazione qui.
Ma se segui la versione 4, reagisci bash di dash di navigazione con un pacchetto aggiuntivo
che devi installare.
Ecco come funziona la navigazione di reazione che questa libreria crea creando i cosiddetti navigatori che alla
fine si può dire che gli oggetti reagiscono effettivamente ai componenti poiché si scoprirà che contengono tutte le configurazioni di navigazione che
contengono tutte le informazioni di quali schermate diverse hai e quali farà il
duro sollevamento caricando diversi schermi e giocando piacevoli transizioni fluide per passare da A
a B per te.
Quindi dobbiamo importare create stack navigator e quindi possiamo semplicemente chiamare che ora create stack navigator richiede almeno un argomento e
che è un oggetto javascript in cui configuriamo le diverse schermate che vogliamo essere in grado di spostare
tra ora e questa app che desidero per iniziare dalla schermata delle categorie e se tocco una categoria lì
voglio andare alla schermata dei pasti della categoria e se poi tocco una ricetta lì su un pasto,
voglio andare alla schermata dei dettagli del pasto, quindi avremo bisogno di questi tre schermate nel nostro navigatore dello stack
in modo che queste siano le tre schermate tra cui puoi spostarti utilizzando questo modello di stack spingendo le pagine
e saltandole via e perché non abbiamo bisogno di preferiti e filtri perché i filtri verranno aggiunti successivamente con
l'aiuto di una barra laterale sarà un'alternativa a questo stack qui e i preferiti anche come alternativa a questo stack
saremo in grado di andare lì con tocchi in seguito ma non in questo momento.
Cominciamo quindi con questa navigazione di base basata sullo stack in cui possiamo andare avanti e indietro
tra le categorie schermata della schermata pasti della categoria e ti forniremo la schermata dei dettagli che informiamo reagire alla navigazione su
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
nome dipende da te in quanto una convenzione sul nome della proprietà deve iniziare con un carattere
maiuscolo qui, ma non devi farlo tecnicamente.
Quindi usi qualsiasi identificatore che desideri come nome di proprietà in questo oggetto che
stai passando per creare stack navigator e ora il valore nella sua forma più semplice è semplicemente un puntatore al componente
di reazione che vuoi caricare come schermata per questa schermata.
Quindi nel mio caso quella sarebbe la schermata delle categorie tutte importare questa schermata di tutte le categorie di importazione dalla
schermata delle categorie di schermate che posso importare perché qui è la mia esportazione predefinita.
Quindi ora mappiamo queste due categorie e questo ci permette di dire in seguito alla navigazione di reazione la libreria che
stiamo usando che dovrebbe caricare la schermata della categoria.
Ora, come ho detto, questo non è l'unico schermo di cui ho bisogno, voglio anche avere i pasti della categoria.
Quindi questi sono i sistemi della seconda schermata Questa schermata presenterà tutti i pasti per la categoria scelta
per cui abbiamo un numero di componenti e questa è la schermata dei pasti di categoria che abbiamo preparato che
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
di mappatura che ha semplicemente il nome della proprietà e quindi un puntatore al componente
che si desidera caricare, inoltre è possibile passare qui l'oggetto e impostare la proprietà dello schermo su questo oggetto e quindi puntare
su il componente che si desidera caricare.
Ora perché dovresti farlo.
Perché ora puoi anche impostare una configurazione aggiuntiva qui oltre allo schermo, potresti impostare alcune opzioni predefinite per lo schermo
e così via, ma questo non è qualcosa di cui dobbiamo preoccuparci in questo
momento, in realtà ci penseremo più avanti in questo modulo voglio solo menzionare che questa
è la scorciatoia, questa è la forma più lunga di dire reagire alla navigazione quali schermate dovrebbero
essere caricate per quale identificatore parlando che abbiamo bisogno di un terzo identificatore ovviamente e questo è l'identificatore
che dovrebbe caricare la nostra schermata dettagliata dai un nome al dettaglio del pasto e voglio indicare la schermata dettagliata del mio
pasto, quindi importerò la schermata del dettaglio del pasto da E ora andiamo nella cartella delle schermate e lì è la schermata dettagliata del pasto
e di nuovo userò il collegamento qui.
Potremmo usare quella forma più lunga ma userò quella scorciatoia nel punto nella schermata dettagliata del pasto.
Quindi, con quella configurazione di base, stiamo dicendo che reagire alla navigazione.
Ehi, questi sono gli schermi che potranno spostarsi tra adesso ma i dati da soli non faranno molto.
Perché.
Perché stiamo creando quel navigatore dello stack ma non stiamo facendo nulla con esso, quindi cambiamo questa creazione del navigatore
dello stack in realtà restituisce un contenitore di navigazione e questo risulta essere un componente di reazione.
È tutto chiamato come navigatore dei pasti.
Sembra un nome appropriato perché è quello che abbiamo alla fine qui.
E ora stiamo memorizzando il componente di reazione creato dallo stack Navigator che è fondamentalmente
un componente di reazione con tutto il pesante sollevamento del caricamento di schermate diverse e la riproduzione di animazioni che questo componente
di reazione è memorizzato nel navigatore dei pasti.
Ora potremmo esportare qui il navigatore dei pasti e provare a usarlo in questo modo e catturarci per renderlo sullo schermo
e vedere cosa succede ma in realtà reagire alla navigazione funziona in modo leggermente diverso.
È inoltre necessario creare un contenitore app in questo contenitore app che è necessario avvolgere il percorso.
Quindi il tuo navigatore principale in questo caso ne abbiamo solo uno, dobbiamo solo impilare Navigator.
Quindi avvolgiamolo con esso.
Spostiamo i pasti nella navigazione o ricreamoli chiamando create container app e quindi passiamo semplicemente
i pasti Navigator come argomento per creare il container app.
Crea anche un contenitore di navigazione.
Quindi ti dà anche un componente di reazione.
Ma questo non è in realtà il componente di reazione.
Dovresti usare il tuo codice ASX perché ora ha tutti i metadati sulla navigazione in generale sulla reazione della
navigazione e così via.
Quindi questo è semplicemente uno schema di cui hai bisogno per avvolgere il tuo percorso con il navigatore più importante con quello e
utilizzare questo componente di reazione al ritorno nel tuo codice J is X, quindi fondamentalmente l'impostazione che avrai sempre
quando lavori con la navigazione di reazione in seguito imparerai anche come utilizzare più navigatori in un'unica app.
A proposito, per ora abbiamo questo ed esportiamo questo componente che la fine crea.
Quindi ora nell'inseguimento delle app possiamo iniziare a utilizzare questo componente.
Quindi abbiamo visto qualcosa sullo schermo per questo andiamo lì e importiamo il navigatore dei pasti dal navigatore dei pasti
di navigazione.
Ora, come ho già detto, il navigatore dei pasti è ora solo un componente di reazione, quindi alla fine quello che
possiamo fare è semplicemente restituirlo invece di restituire la nostra visione con il nostro testo qui.
Restituirò il navigatore dei pasti e dato che è un componente di reazione, posso semplicemente usare
un po 'di codice di Isaac come questo con papà se lo salviamo.
Diamo un'occhiata alla nostra applicazione mentre si ricarica
e potrebbe essere necessario ricaricare manualmente la tua app.
Dovresti vedere la schermata delle categorie una volta ricaricata e questo ovviamente è enorme perché questo
significa che funziona.
Ora per favore nota anche che tutti di default ottengono una bella intestazione che ha la piattaforma
predefinita cerca IO s è pulito piatto ha questa linea sottile sotto di essa per Android è più dimensionale perché ha
tutto una leggera ombra.
Ora ovviamente manca un titolo e imparerai come possiamo aggiungerne uno in questo modulo ma lo
tiriamo fuori dalla scatola e questo rispetta automaticamente tutte le tacche che potresti dover rimanere così lontano che hai qui,
quindi utilizza automaticamente un tale visualizzazione dell'area sicura e questo è tutto ciò che ho menzionato nell'ultimo modulo del
corso mentre hai questo componente e a volte ne hai bisogno, ad esempio quando si crea un'app con
la navigazione reattiva, la navigazione reattiva avvolge già le tue visualizzazioni in una vista area sicura, almeno lo farà molto del lavoro che
dovresti fare altrimenti farà in modo che la tua intestazione abbia un bell'aspetto e questa è una
grande cosa perché la creazione manuale di un'intestazione che sembra buona su tutti i dispositivi è in realtà
un bel po 'di lavoro.
Quindi è quello che arriviamo qui.
La domanda ovvia ora è come possiamo raggiungere le nostre altre schermate.