Bene per raggiungere le nostre altre schermate, abbiamo bisogno di qualcosa su cui possiamo fare clic, che possiamo toccare.
Successivamente avremo la nostra griglia di categorie qui e lavoreremo anche su questo in questo
modulo, ma solo per iniziare con la navigazione, aggiungerò un pulsante, quindi
nella schermata delle categorie in cui ho questo testo, voglio aggiungere un pulsante che posso toccare per accedere alla
schermata dei pasti della categoria.
Quindi, qui, aggiungerò questo pulsante React Native, quello incorporato e impostato un titolo per andare ai pasti e quando premiamo questo
pulsante, voglio attivare una funzione che mi porta effettivamente alla schermata dei pasti
della categoria.
Ora impostiamo la schermata dei pasti di
quella categoria qui, ma come possiamo ora andare ad essa? Bene, per questo, è importante sapere che qualsiasi componente caricato
con l'aiuto della navigazione React ottiene automaticamente un puntello speciale, quindi qualsiasi componente mappato a uno dei tuoi identificatori
dello schermo qui, quindi in
questo caso questi tre componenti, otterranno il prop speciale. I componenti nidificati lì dentro non lo ottengono automaticamente,
ma solo i componenti di livello superiore che hai mappato agli identificatori nei tuoi navigatori.
Quindi è un oggetto speciale di cui sto parlando,
diamo un'occhiata a questo.
Quindi qui negli oggetti di scena, possiamo estrarlo e iniziamo semplicemente dalla console di registrazione degli oggetti di scena qui, in modo
che possiamo avere un'idea e per ora in modo da non avere un
errore, passerò semplicemente una funzione vuota qui su onPress .
Quindi salviamo questo e vediamo cosa c'è dentro gli oggetti di scena.
Questo ricarica, abbiamo il pulsante che non fa nulla e qui nella console, infatti, vediamo che gli oggetti di scena
non sono vuoti.
Questo è
il nostro oggetto oggetti di scena e lì abbiamo un oggetto di navigazione che a sua volta
è un oggetto che ha alcune azioni, okay ma che ha anche ad esempio pop, push, sostituzione, reset e una funzione di navigazione, quindi un mucchio di funzioni
lì dentro, funzioni che ci aiutano a spostarci nella nostra app.
Ha anche un puntello per schermo, quindi il nostro puntello per schermo che possiamo ignorare per ora.
Questo è ciò che c'è dentro gli oggetti di scena e questo oggetto di navigazione, questa parte di navigazione che
è lì
dentro, ci aiuta davvero, quindi questo oggetto di navigazione. Ci aiuta qui perché quando premiamo questo pulsante e lo
farò con una funzione freccia in linea qui, ovviamente potresti avere una funzione separata che crei
e che poi mappi su
onPress, questo ci aiuta e questo può essere usato per navigare.
Quindi sulla navigazione degli oggetti di scena, la navigazione è questo oggetto speciale che stiamo ottenendo da React navigation perché
abbiamo caricato questo componente della schermata delle categorie con l'aiuto del nostro
navigatore qui, questo oggetto di navigazione speciale ha un metodo di navigazione
e questo è il tuo
metodo principale, il più importante metodo per spostarsi con l'aiuto della navigazione React. Come funziona la navigazione?
Navigate accetta un oggetto come argomento e in questo oggetto è possibile impostare il nome della rotta verso cui si
desidera navigare.
Quindi passi una proprietà del nome della rotta in questo oggetto che passi per navigare e ora importante, il nome
della rotta che specifichi qui deve essere uno dei tre nomi di rotta che ho impostato qui.
Ora i nomi delle rotte sono gli identificativi che mostri scelti di fronte a questi due punti, quindi i nomi delle proprietà in
questo oggetto che hai passato per creare il navigatore dello stack.
Questi sono i nomi dei tuoi percorsi
e questo è quello che ora puoi usare per navigare. Quindi qui voglio andare ai pasti di categoria,
questo è il nome
della rotta che voglio usare, quindi quindi qui, indico i
pasti di categoria ma non in questo modo, questo in Javascript cercherebbe una variabile di pasti di categoria, invece di una stringa
denominata pasti di categoria perché questo dirà sostanzialmente alla navigazione Javascript e React alla fine che si desidera
andare al percorso che ha il nome dei pasti di categoria e che è questo percorso qui.
Quindi ora è così che puoi andare lì.
Se ora lo salviamo e facciamo clic su Vai ai pasti qui, vedi che andiamo alla schermata dei pasti, prendiamo
questa bella animazione fuori dalla scatola, otteniamo questo pulsante indietro che sembra esattamente
come ci aspetteremmo iOS e tutto ciò funziona subito senza alcun lavoro extra, nessun controllo, nessun codice
di animazione manuale, lo otteniamo immediatamente grazie alla libreria di navigazione React.
Quindi, con questo, possiamo andare avanti e indietro alla nostra schermata dei pasti, alla schermata dei pasti di categoria e quindi di nuovo
alla schermata delle categorie e questo funziona anche su Android. Lì otteniamo la navigazione di routing specifica per Android
che sembra un po 'diversa rispetto a iOS, è l'animazione di navigazione che ti aspetteresti su Android,
ovviamente puoi anche usare il pulsante Indietro del dispositivo per tornare indietro.
Quindi è così che puoi navigare verso una schermata diversa e, per favore, nota che la navigazione
ovviamente non dice nulla sulla direzione che vogliamo andare, non dice alla navigazione React se dovrebbe
riprodurre quell'animazione in avanti o quella all'indietro . React navigation lo rileva automaticamente perché, sotto il cofano,
gestisce questa pila di pagine di cui stavo parlando, questa pila di schermate e in questa pila, in
questo momento quando avviamo l'app, abbiamo solo la schermata della categoria ma quando premo questo pulsante
, navigare alla fine indica a React navigation che, poiché lo stiamo facendo all'interno di un componente che
è stato caricato con un navigatore dello stack, vogliamo passare a una schermata diversa che
dovrebbe essere inserita in cima allo stack. Questo è semplicemente il comportamento predefinito e, quindi, sa che vuole
andare avanti perché è stato premuto un nuovo percorso, il che significa che è stato aggiunto allo stack, vogliamo andare
avanti e quando facciamo clic sul pulsante Indietro che aggiunge automaticamente, esso fa uscire questa schermata dallo stack e poiché rimuove qualcosa dallo
stack, sa che dovrebbe riprodurre l'animazione posteriore. Quindi è quello che sta succedendo
dietro le quinte, non devi davvero preoccuparti di questo e questa è la
cosa buona, voglio solo che tu sia consapevole di ciò, che la navigazione React sta facendo il
lavoro pesante per te lì e gestisce questo stack di schermo e le animazioni di cui hai bisogno quindi sotto il cofano per te.
Va
bene, quindi ci sta permettendo di andare avanti e indietro o avanti e indietro.
Ora la tua sfida per la prossima lezione in cui lo faremo insieme è che anche tu farai lo
stesso nella schermata dei pasti della categoria e assicurarti che da lì possiamo anche
andare alla schermata dei pasti. Non dovrebbe essere troppo difficile, nella prossima lezione, lo faremo insieme.