Quindi voglio avere un pulsante di salvataggio nella mia intestazione e per quello, ovviamente, dobbiamo aggiungere opzioni di navigazione nella schermata della mappa e
usare il modulo funzione lì, in modo da avere accesso a questo nav, quell'oggetto con l'oggetto di
navigazione e lì dentro , Voglio restituire il mio oggetto di configurazione.
Potresti aggiungere un titolo di intestazione, ma in realtà sono
felice senza uno, ma voglio impostare l'intestazione proprio qui e ora importante, qui puoi ovviamente usare
i pulsanti di intestazione e rendere una bella icona ma in realtà, renderò del testo qui. Quindi importerò il componente di testo o
mi assicurerò di averlo importato. Renderò un po 'di testo qui
dove dirò solo di salvare e ovviamente potresti anche aggiungere un controllo della
piattaforma per
rendere maiuscolo questo su Android se lo desideri, dirò semplicemente salva così e quindi aggiungerò uno stile qui Aggiungo il mio stile
di testo del pulsante di intestazione e intorno a quello, voglio avere una vista tangibile,
quindi userò l'opacità tangibile qui che quindi devi anche importare, non da lì ma in realtà
da React Native, quindi l'opacità toccabile dovrebbe essere importata da React Native e con quello importato, possiamo avvolgerlo attorno a
questo testo per creare i nostri pulsanti, per così dire e lì, voglio anche aggiungere uno stile e
quello stile avrà un identificatore del pulsante di intestazione, diciamo. Ora, premendo su questo, voglio salvare ciò che abbiamo aggiunto o salvare la nostra posizione che abbiamo
scelto, ma è qualcosa che farò in un secondo, per ora modelliamo questo. Quindi laggiù nel foglio di stile, per il pulsante dell'intestazione
che è quell'opacità tangibile, aggiungerò un margine orizzontale di 20 per avere una spaziatura attorno al pulsante a sinistra e a destra e
sul testo del pulsante dell'intestazione qui, è ovviamente su a te cosa vuoi aggiungere lì,
ma aggiungerò una dimensione del carattere di 16 diciamo e importante, il colore. Per questo, ho bisogno dell'API della piattaforma perché il colore deve
essere diverso, poiché questo è nell'intestazione che ha uno sfondo solido su Android ma non su iOS,
posso impostare il mio colore qui, il mio colore del testo su Piattaforma. Il sistema operativo è uguale ad Android, quindi per controllare questo e su Android lo
imposterò su bianco e in caso contrario, lo imposterò su Colori. primario e per quello, come
sempre, assicurati di importare i tuoi colori costanti da lassù.
Quindi ora abbiamo il pulsante Salva, quando premiamo il pulsante Salva, voglio attivare una funzione che dovrebbe essere definita nel
componente e che è anche qualcosa che abbiamo fatto più volte nel corso, ti ho mostrato come puoi comunicare
tra il tuo componente e anche le tue opzioni di navigazione qui. Quindi possiamo essenzialmente aggiungere una nuova funzione
qui, salvare il gestore della posizione scelto, qualunque cosa tu voglia nominarla e questa funzione o un riferimento a questa funzione dovrebbe essere passato
alle opzioni di navigazione e per questo, possiamo usare il buon vecchio
gancio effetto uso e usa il callback per evitare questo loop infinito se ricordi e possiamo quindi
avvolgerlo con l'uso del callback e quindi usare l'effetto qui per dire alle nostre opzioni di navigazione su questo usando i parametri di
navigazione di props set e quindi voglio impostare il mio parametro di posizione di salvataggio qui al gestore della posizione di salvataggio scelto, quindi passa un riferimento
a questa funzione, a questo parametro o con questo parametro alle mie intestazioni e l'effetto dell'uso ovviamente
dipende dalla funzione del gestore di posizione di salvataggio del salvataggio, quindi lo aggiungerò come dipendenza qui e
importante ora, usare callback qui ha anche una serie di dipendenze perché qui, voglio sostanzialmente lasciare questa pagina e tornare indietro,
quindi qui posso usare la navigazione degli oggetti di scena tornare indietro
e lo faremo in un secondo, ma per ora, noi può fare questo.
E quindi, normalmente, ovviamente, questa funzione di ritorno sarebbe la mia dipendenza, ma per evitare un ciclo infinito, con questo
approccio dobbiamo usare usando i parametri per aggiornare il componente che già ci troviamo,
in realtà aggiungerò un array vuoto qui come dipendenza, in modo che questa funzione non sia effettivamente ricostruita
in questo momento.
Quindi, con ciò, possiamo estrarre questo parametro di posizione di salvataggio nella nostra intestazione.
Quindi qui, voglio puntare alla mia funzione di salvataggio che ottengo con navData. navigazione. getParam che punta all'identificatore della posizione di
salvataggio e quindi alla funzione di salvataggio è la funzione che collego al gestore onPress
sull'opacità tangibile.
Quindi questo dovrebbe attivare questa funzione di salvataggio, questa funzione di gestione della posizione di salvataggio selezionata qui. Con quello salvato se torniamo indietro, proviamo, andiamo a
scegliere sulla
mappa e se ora faccio clic su Salva, dovrebbe semplicemente tornare indietro e lo fa.
Quindi funziona, ma ovviamente adesso, non sto salvando nessuna posizione, non sto usando nessuna posizione, questo è
il passo successivo e per
questo dobbiamo passare la posizione scelta dall'utente nella schermata precedente. Con il ritorno, è relativamente difficile ma
invece possiamo usare un modello che non avevo mai usato prima in questo
corso, posso usare anche navigare qui per tornare indietro. Posso navigare nella mia nuova schermata dei luoghi con il nuovo identificativo
dei luoghi come impostato qui nel navigatore dei miei luoghi e poiché sono già su uno schermo davanti a quella nuova schermata dei luoghi, non
dimenticare che questa
è una pila di schermi e io sono su uno schermo in cima alla schermata del nuovo
posto, questo in realtà non spingerà questa schermata del nuovo posto in cima allo schermo esistente,
potremmo forzarlo con la spinta ma non voglio,
invece tornerà indietro ma ora usando la navigazione, posso aggiungere alcuni parametri qui. Posso aggiungere la mia posizione prescelta e lì, puntare sul
puntello di posizione selezionato che si spera mantenga la mia posizione scelta. Ora da quando uso la posizione selezionata qui e poiché queste modifiche,
aggiungerò questa come dipendenza per usare la richiamata in modo che questa funzione venga ricreata
quando abbiamo scelto una nuova posizione e voglio assicurarmi di avere una posizione qui
, quindi controllerò se la posizione selezionata o per essere precisi, se non ne abbiamo una, quindi se questo
non è definito,
il che significa che l'utente non ha ancora scelto uno, quindi tornerò e non
continuerò e possiamo anche mostrare un avviso qui se vogliamo. Ora non lo farò qui, ma potresti mostrare un
avviso se lo desideri.
Quindi ora saremo in grado di fare clic su Salva solo se abbiamo scelto una posizione, ma se
lo facciamo, lo imposteremo effettivamente sui parametri della nostra
azione di ritorno. Proviamo, andiamo lì,
fai clic su picK sulla mappa e ora tieni presente che non ho ancora scelto alcuna posizione, non ho ancora
cliccato da nessuna parte, quindi
se faccio clic su Salva, non succede nulla. Se scelgo una posizione e faccio clic su Salva, ci torno comunque.
Quindi ora possiamo usare i dati che passiamo indietro dalla schermata della mappa nel nostro selettore di posizione per aggiornare l'anteprima della mappa
lì, quindi è
la prossima cosa che farò.