La maggior parte dei nostri file non ha bisogno di cambiare.
Ciò che dovremo cambiare è ciò che sta accadendo nei file di navigazione e nella
cartella di navigazione nell'app J. S. potresti ricordare di rendere il contenitore
di navigazione qui e il contenitore di navigazione è solo un componente personalizzato qui dove alla fine abbiamo la
nostra logica per verificare se l'utente è autenticato e quindi rendiamo un Navigatore negozio che è il nostro navigatore
di rotta creato qui con la navigazione reattiva ed è qui che le cose devono cambiare ora.
Ora cominciamo con il contenitore di navigazione.
Non avremo più bisogno di questo codice qui dove navigheremo manualmente da qualche altra parte se l'utente è autenticato perché
vedrai in seguito che questo verrà gestito in modo diverso con questa configurazione basata su componenti in modo da
poter eliminare utilizzare il fatto qui.
Keep è disattivato qui sebbene sia possibile eliminare qui il ref ed eliminarlo anche lì e quando si tratta delle importazioni
qui non abbiamo più bisogno di due ganci qui e non tutti abbiamo più bisogno di questa importazione.
Quindi ci resta solo il navigatore del negozio e anche questo non è più qualcosa di cui abbiamo bisogno qui.
Non stiamo aggiungendo un navigatore negozio come un componente come questo in cui faremo riferimento alla configurazione
generale dal file del navigatore negozio perché quella configurazione generale è ovviamente impostata con quella vecchia logica
di avere quel registro globale come la configurazione che è semplicemente non funziona più con la navigazione di
reazione 5.
Invece ora dobbiamo migrare tutto ciò al nuovo approccio a questo approccio basato sui componenti e
per farlo.
Voglio iniziare abbastanza semplice nel contenitore di navigazione.
Installerò un nuovo stack Navigator che per ora è solo un fittizio Navigator.
Quindi hai visto come funziona generalmente prima che poi in seguito applicheremo effettivamente questo
alla nostra vera applicazione per quello.
Aggiungiamo l'importazione qui da a reazioni.
Barra di navigazione nativa.
E da lì dobbiamo importare la navigazione dal container di navigazione.
Ora questo può essere fonte di confusione perché il nostro componente qui è tutto il contenitore di navigazione denominato.
Quindi per evitare confusione qui rinominerò il nostro componente qui in Navigatore app o come vuoi nominarlo in modo
da rinominarlo qui e tutto ciò per evitare confusione anche se non è tecnicamente
richiesto nel componente dell'app in app sì importato come navigatore delle app Rinominerò il file in navigatore delle app
e importerò dal navigatore delle app qui nel componente dell'app in modo da adattare il percorso di importazione per includere
quel nuovo nome di file.
E poi qui visualizzo il navigatore delle app.
Ora ho appena apportato queste modifiche al nome per evitare confusione.
La parte più importante accade all'interno dell'app Navigator che in precedenza era il nostro contenitore di navigazione.
Ora stiamo importando container di navigazione da React Native.
Ma papà sarà un componente diverso da quello che abbiamo costruito in passato.
Ha appena condiviso lo stesso nome, motivo per cui l'ho rinominato più importante di questo contenitore di navigazione.
Per il momento invece importiamo qualcosa dallo stack di barra di navigazione di reazione agli annunci.
E questo è ora un pacchetto che non esiste e che non abbiamo ancora installato.
Quindi fermiamo di nuovo questo processo.
E con npm install dash dash safe installiamoci nello stack di barre reattive di navigazione così NPM ha installato Ashutosh sicuro
nello stack di barre reattive di navigazione.
Questo ci installerà la logica di navigazione dello stack e tutti noi possiamo già installare
un numero di pacchetti perché ne avremo bisogno in seguito e questo è reagire alla barra di navigazione
che ci darà in seguito la navigazione basata sul disegno di cui avremo bisogno, quindi aspettiamo un D ai comandi di installazione per terminare
e successivamente con l'avvio del motore possiamo richiamare nuovamente questo server expo, quindi ora abbiamo installato lo stack di vietnamizzazione.
Possiamo importare qualcosa da esso e questo è qualcosa come D create stack navigator.
Ora crea stack Navigator è una funzione che conosciamo già nel negozio Navigator che utilizza ancora la
vecchia navigazione di reazione in cui importiamo anche per creare stack navigator dalla navigazione di reazione o
se stavi utilizzando questo pacchetto per un pacchetto separato.
Ma abbiamo anche creato stack navigator lì dentro e creato il draw navigator finisce.
Ora abbiamo usato create stack navigator per creare la nostra configurazione di configurazione del nostro registro di navigazione per questa parte della nostra applicazione, potreste dirlo per la
panoramica dei prodotti sul dettaglio del prodotto e lo schermo della scheda
che abbiamo messo insieme in uno stack e quindi abbiamo avuto più di questi stack per comporli
per riunirci nel nostro sorteggio Navigator che alla fine abbiamo poi combinato con lo schermo spento nel navigatore switch.
Ora torniamo al nostro navigatore di app che cosa facciamo con lo stack navigator qui.
Ora funziona in modo diverso.
Ora lo usiamo per creare un nuovo componente con esso e lo nominerò il mio stack.
Il nome dipende totalmente da te, ma basta chiamare per creare un navigatore dello stack come questo e il gioco è fatto.
E questo ora è un grande cambiamento.
Ora non si passa alcun oggetto per creare stack navigator per configurarlo.
Invece è una funzione che non vuole un oggetto.
È una funzione che non ha bisogno di alcun oggetto, quindi cosa fa allora.
Qual è il mio stack il mio stack è ora un componente di reazione e lo usiamo come tale qui nel navigatore dell'app per
essere precisi.
Dobbiamo avvolgere tutta la logica di navigazione con il componente del contenitore di navigazione che stiamo importando
da nativo di navigazione reattiva.
Puoi pensare a quel componente del contenitore di navigazione fondamentalmente come alla versione del componente del contenitore dell'app che abbiamo
creato con creare il contenitore dell'app nella vecchia configurazione.
Proprio lì abbiamo dovuto avvolgere il nostro navigatore finito con creare un contenitore di app.
Ora dobbiamo concludere la nostra configurazione di navigazione basata su componenti da completare con il contenitore di navigazione.
Quindi qui impostiamo la nostra logica quando si tratta di quali pagine vogliamo caricare.
E qui ora usiamo il mio stack come componente di reazione, ma non in questo modo.
Ma invece qui abbiamo bisogno del componente DOT Navigator.
Quindi quello che il mio stack è in realtà è che è un oggetto con una proprietà navigator e i
valori memorizzati in quella proprietà sono ora un componente.
Quindi ora possiamo creare quel componente e tra la tassa di apertura e chiusura di questo
componente ora mettiamo sostanzialmente i diversi schermi che vogliamo far parte di quello stack.
Quindi, ciò che in precedenza qui nel navigatore del negozio aveva all'interno di questo oggetto, passammo per creare il navigatore dello stack
questa mappa dei componenti dello schermo e dei loro nomi.
Questo è ciò che stiamo impostando qui tra questo tag di apertura e chiusura.
Si potrebbe quindi pensare che ciò che facciamo sia aggiungere correttamente il componente della schermata di panoramica del prodotto.
Questo è uno dei nostri componenti che aggiungeremo un'importazione che non abbiamo fatto qui perché questo
è sbagliato ma potresti pensare che lo facciamo quasi bene.
Questo sarebbe sicuramente lo schermo che vogliamo avere come parte di questo navigatore ma non avrebbe
un nome.
Ora abbiamo bisogno di un nome in modo da poterlo navigare ad esempio in modo da poter attivare una navigazione da qualche
parte nella nostra applicazione.
Ecco perché abbiamo un nome anche qui sulla vecchia configurazione.
Quindi invece facciamo qualcosa di diverso.
Usiamo di nuovo il mio stack questo oggetto lassù e ora una seconda proprietà che ha la proprietà screen proprio
come la proprietà navigator, la proprietà screen contiene anche un componente di reazione e quindi possiamo renderlo
in questo modo.
Questo è ora un componente che ci consente di definire uno schermo che dovrebbe far parte di quel
navigatore dello stack qui e lo configuriamo con l'aiuto dei puntelli ora perché stiamo lavorando con un componente qui, quindi la
configurazione funziona con i puntelli proprio come è sempre il caso quando lavoriamo con componenti per dare un
nome a questa schermata aggiungiamo un nome prop e ora possiamo usare quel nome che usiamo qui panoramica prodotti in modo da
poter aggiungere questo nome e far reagire alla navigazione quale componente caricare quando targetizziamo questo nome quando
lo facciamo con un'azione sull'immigrazione, ad esempio, aggiungiamo un secondo sostegno il componente puntello e questo dovrebbe tenere un puntatore
sul componente che vogliamo caricare quando vogliamo passare a questa schermata con questo nome.
Quindi per questo ho intenzione di importare la schermata di panoramica dei prodotti qui dalla nostra cartella delle schermate nella sottocartella degli acquisti e quindi nella schermata
di panoramica dei prodotti.
Quindi ora ne abbiamo bisogno e sono passato è qui.
Ora importante non creiamo il componente qui.
Indichiamo solo che usiamo solo il suo nome che viene esportato da quel file.
E con questo ora abbiamo il nostro primo piccolo stack impostato qui.
Ora commentiamo questa importazione dal navigatore del negozio.
Non ne abbiamo più bisogno al momento.
Salviamo tutto e lanciamo il suo su Android, diciamo.
E quando lo fai crea il bundle javascript e si apre sul dispositivo Android.
E quello che vedrai è la nostra schermata di panoramica dei prodotti.
Certo sembra un po 'diverso.
Naturalmente mancano i pulsanti dell'intestazione.
Manca l'intera configurazione dell'intestazione.
Il titolo è tutto sbagliato ma questo ha senso perché non stiamo usando il vecchio navigatore
in cui avevamo tutta questa configurazione ma quella nuova e questa è solo una prova che funziona e come funziona.
Ora, con questa conoscenza in mente, lasciamo qui questo piccolo esempio e portiamo effettivamente la nostra intera navigazione impostata
qui su questa nuova logica.