Quindi lavoriamo sul porting della nostra intera logica qui nel navigatore delle app.
Abbiamo iniziato con questo stack fittizio qui ed è bello ma alla fine non è quello di cui abbiamo bisogno.
Ora tocca a te fare quella configurazione ma da quando lo abbiamo fatto sostanzialmente nel file di navigazione
del negozio prima.
Continuerò anche a farlo lì.
Anche con quella nuova logica.
Quindi quello che farò è un navigatore di app.
In realtà mi sbarazzerò di questo mio stack qui e mi sbarazzerò di questa importazione e me ne
sbarazzerò qui lascerò il contenitore di navigazione di e resetterò questa importazione anche se alla fine cambierà
questo un po.
Ma ora passiamo al navigatore del negozio lì prima di tutto possiamo eliminare questa importazione da reagire alla navigazione
non ci servirà.
Lasciamo il resto per ora sebbene invece di quell'importazione cancellata da cui possiamo importare nello stack
di navigazione reattivo e tutto provenga già dallo stack di disegno e dallo stack di annunci importiamo create stack navigator
da slash draw importiamo create draw navigator.
Ora possiamo scorrere verso il basso e possiamo effettivamente lasciare qui le opzioni di navigazione predefinite.
Per fortuna il nome squilla e il modo in cui generalmente configuri le cose e ciò che
puoi configurare non è cambiato davvero solo come applichi la configurazione modificata e quindi ciò
che sicuramente deve cambiare è questa parte qui il nostro primo navigatore dello stack che per ora farò duplicato e successivamente cancellato o commentato per
fare un confronto fianco a fianco, creerò una nuova costante che chiamerò prodotti stack navigator solo per non
avere uno scontro di nomi e che è davvero ovvio che
questo conterrà una pila di pagine una pila di schermate e lo facciamo con create stack navigator con questa
funzione quello che ti ho mostrato prima che questa funzione non prenda più parametri invece creerò qui una nuova costante Navigator dei
prodotti.
Quindi ora abbiamo uno scontro di nomi ma questo verrà rimosso comunque.
E questo è ora un componente di reazione del componente funzionale e potremmo down per tutto l'archiviazione
in un file separato solo per questo confronto fianco a fianco e perché avevamo tutto in questo file
prima che ora imposterò tutti questi componenti del navigatore con la nostra navigazione la configurazione qui in questo
singolo file suddividendolo è sicuramente qualcosa che potresti prendere in considerazione.
Quindi ecco il nostro navigatore di prodotti e lì ora restituirò i prodotti Stack Navigator Dot Navigator
come hai appreso e nella loro schermata Stack di Navigator punti prodotti e abbiamo avuto tre schermate prima, quindi
lo replicherò due volte.
Quindi abbiamo tre schermi lì dentro.
Ora possiamo configurarli, assegniamo un nome alla prima schermata e sarà la panoramica dei prodotti.
Ora il componente da caricare è il componente della schermata di panoramica dei nostri prodotti.
Quindi sostanzialmente quello che abbiamo mappato prima anche ora per la seconda schermata il nome è il dettaglio del prodotto.
Quindi quello che avevamo qui e assicurati di mantenere quei nomi in modo
che l'intera logica di navigazione che hai nella tua app perché non debba essere modificata in modo che
funzioni ancora e qui il componente che dovrebbe essere caricato quando vogliamo raggiungere quello schermo è
il componente dettagliato dello schermo del prodotto così come lo abbiamo fatto laggiù riformiamolo e per l'ultimo schermo il nome è carrello.
Quello che avevamo qui e vogliamo andare allo schermo del cuore in questo modo.
Quindi ora impostiamo questo stack di navigazione con questa nuova logica basata su componenti.
Ora possiamo importare nel navigatore delle app e per papà dobbiamo solo aggiungere
una parola chiave di esportazione al suo interno in modo che questa costante questo componente venga esportata qui in
questo file e nel navigatore dell'app non importiamo il navigatore del negozio ma importiamo il navigatore dei prodotti appena esportato importiamo che qui e
nel nostro contenitore di navigazione ora possiamo aggiungere il navigatore del prodotto in questo modo e possiamo
eliminare l'importazione della schermata di panoramica del prodotto.
Ora torniamo al navigatore del negozio.
Diamo un'occhiata a queste opzioni.
Successivamente le opzioni di navigazione che abbiamo avuto qui su questo stack.
Cosa facciamo con quello.
Bene, in realtà abbiamo due opzioni qui sul navigatore dei nostri prodotti sul vecchio navigatore con la vecchia
logica è un'icona di azione.
Questo stack dovrebbe avere nel cassetto che aggiungeremo in seguito il secondo sono le nostre opzioni di navigazione predefinite che dovrebbero
essere applicate a tutte le schermate che fanno parte di questo navigatore.
E in realtà c'è anche un terzo posto in cui configuriamo le cose in passato.
E quello era in alcuni degli schermi.
Diamo un'occhiata alla nostra schermata di panoramica del prodotto che cosa c'è nella cartella del negozio lì se scorriamo verso il basso.
Avevamo questa proprietà delle opzioni di navigazione che abbiamo aggiunto all'oggetto funzionale della schermata di panoramica dei prodotti e che era una
funzione in cui configuriamo cose come il titolo dell'intestazione ma anche ciò che è a
sinistra e il set giusto dell'intestazione ora con questa nuova logica.
Non lo fai più così.
Invece possiamo copiare l'intero set qui.
Quindi tutto ciò possiamo copiarlo.
Possiamo commentarlo qui nel componente schermo e andare al componente navigatore app.
Mi scusi per acquistare il componente navigatore dove abbiamo impostato la nostra navigazione dello stack e
ora sullo schermo in cui vogliamo avere quelle opzioni possiamo aggiungere un terzo prop e che è la proprietà de options e due opzioni.
Puoi analizzare esattamente quello che avevi nel componente prima, quindi passare la funzione fa è una funzione
giusta.
Che riceve il parametro
di dati NAF che quindi restituisce un oggetto di configurazione, il valore concreto di questo parametro verrà inserito
dalla navigazione di reazione e i nomi di configurazione che possiamo impostare qui non cambiano le cose che possiamo
configurare.
Quindi possiamo ancora impostare un titolo di intestazione avanti o a sinistra.
Quindi tutto questo è esattamente lo stesso che hai imparato.
Funziona esattamente allo stesso modo.
Per fortuna ora potremmo farlo qui e fare acquisti navigatore.
Ma questo ovviamente diventerebbe rapidamente molto grande se avessimo qui tutte le diverse configurazioni
specifiche dello schermo.
Quindi in realtà non è quello che farò qui.
Invece vedo due opzioni.
Uno è che effettivamente eseguiamo la nostra configurazione dallo schermo di navigazione dello stack dei prodotti nel componente dello schermo.
Il secondo è che manteniamo lì le nostre opzioni e questo è l'approccio che seguirò.
Quindi, nella panoramica del prodotto, lo commenterò di nuovo, ma ora qui non impostiamo più come valore per il
prop di opzioni di navigazione, ma lo esportiamo semplicemente come costante una costante alla quale dobbiamo dare un nome
e io ' Nominerò questa opzione di schermo nessuna opzione di schermo contiene questa funzione e la esportiamo con il
suo nome.
Non si scontra con l'esportazione del componente perché lo facciamo qui con l'impostazione predefinita.
Quindi ora esportiamo è la funzione di configurazione e quindi il navigatore del negozio possiamo quindi importarlo, quindi oltre
a importare la schermata di panoramica dei prodotti da quel file ora possiamo anche
combinare quello con un'importazione denominata dove importiamo nella funzione di opzioni dello schermo e quindi qui due opzioni su questa schermata.
Ho appena passato un puntatore a questa funzione, non eseguirlo, ma solo puntato.
Reagiamo alla navigazione eseguita per te in modo che possa rientrare nel valore
concreto per questa funzione dei parametri di dati NAF una volta e con questa schermata è configurata.
Ora, se salviamo gli scontri pubblicitari perché abbiamo questo nome in conflitto laggiù.
Quindi, per risolvere questo problema, assicuriamoci di supportare tutte le altre opzioni.
Ora l'opzione specifica del disegno è qualcosa che vedremo più avanti una volta aggiunto un disegno per le opzioni
di navigazione predefinite.
La buona notizia è che possiamo ancora applicare quelli che non dobbiamo impostare tutto a livello di schermo.
Se abbiamo una configurazione condivisa che interessa tutte le schermate di un navigatore.
E come pensi che possiamo impostare tali opzioni generali per tutti questi schermi gratuiti qui.
Bene li abbiamo installati direttamente sul navigatore lì.
Abbiamo anche una piccola proprietà delle opzioni dello schermo, quindi non opzioni nominate ma opzioni dello schermo.
Ma queste sono le opzioni che verranno applicate a tutte le schermate qui e le opzioni specifiche
della schermata verranno unite a queste opzioni generali proprio come prima nel corso.
Ora qui passiamo il nostro oggetto di opzioni di navigazione predefinito.
Quindi, questo oggetto lassù ho semplicemente fornito questo valore alle opzioni dello schermo e basta.
Ora possiamo commentare come navigatore prodotti qui e salvare tutto.
Ora, una volta fatto, non riusciamo ancora a vedere il risultato perché in questo file di navigazione del negozio abbiamo ancora
molto codice che utilizza il vecchio navigatore o quella vecchia logica di navigatore e che qui sta causando un problema.
Ora, per vedere ancora un risultato, lo commenterò temporaneamente solo temporaneamente e lo salverò di
nuovo.
In modo che questo ricostruisca e vedi che ora riceviamo un errore.
Bene, c'è una cosa che dobbiamo effettivamente regolare e il componente di panoramica del prodotto nella nostra
opzione dello schermo dirige l'intestazione a sinistra.
Questo ora deve essere una funzione qui che restituisce il nostro markup del marchio JSA X e lo stesso per l'intestazione a destra.
Quindi dobbiamo convertirli entrambi in funzioni e puoi semplicemente farlo aggiungendo un elenco di parametri vuoto e quindi
la freccia qui.
Nota a margine che potresti accettare il parametro qui se lo volessi e che sarebbe puntelli perché in
realtà questo è ora un componente di reazione uccello che trova qui verrà alimentato un
valore concreto per i puntelli e reagendo alla navigazione e i valori che puoi ottenere da lì possono
essere trovato nei documenti ufficiali con questa modifica apportata se ora la sicurezza è ora riavvia qui e ora vediamo di nuovo quella schermata.
Ora sicuramente riprendo la nostra configurazione.
Tieni presente che il disegno non funzionerà perché non abbiamo ancora aggiunto disegno e navigazione, quindi con
tutto ciò abbiamo imparato come possiamo configurare i nostri componenti i nostri schermi e il navigatore generale dello
stack con quella nuova logica.
È tempo di continuare il porting Sicuramente sentiti libero di fare i prossimi passi da solo e una porta
per schermare le opzioni specifiche per i dettagli del prodotto e lo schermo della carta e in seguito passeremo allo stack
successivo.
E poi ovviamente anche fare causa al sorteggio.