Per la posizione dell'utente, abbiamo creato un altro pacchetto integrato in expo che possiamo facilmente usare e
che è un pacchetto di posizione.
Ora, proprio come prima, lo installi seguendo le istruzioni qui e poi vedi anche un
esempio di utilizzo
laggiù, quindi facciamolo rapidamente.
Eseguiamo expo install expo-location nel nostro progetto e con quello installato, ora possiamo anche aggiungere un
altro componente, oltre al componente di
selezione delle immagini, aggiungerò LocationPicker. js file perché è un'altra cosa che voglio essere in grado di fare
in questa app, voglio essere in grado di scegliere una posizione. Per quello nel componente selettore di
posizione, importerò ovviamente React da React perché alla fine sarà un normale componente React e importerò un paio
di cose da React Native e tra queste c'è la vista, un pulsante che ci consente per iniziare a ottenere la posizione dell'utente,
un po 'di testo, anche per mostrare un testo di fallback predefinito mentre nessun luogo è stato
selezionato, un indicatore di attività per mostrare uno spinner mentre stiamo aspettando che venga recuperata la
posizione e forse anche un avviso per mostrare un avviso se qualcosa va storto e anche il
foglio di stile ovviamente per modellare questo componente.
Ora qui, ho il mio componente selettore di posizione che riceve oggetti di scena e poi faremo
qualcosa, impostando l'oggetto stili con il foglio di stile. creare e, alla fine, esportare qui il componente di
selezione posizione come predefinito, in questo modo. Ora per quel componente, come dovrebbe essere il suo codice jsx?
Alla fine, dipende da te, ma inizierò in modo molto semplice qui e avrò solo una vista
con un
pulsante che mi permetterà di iniziare a trovare la posizione dell'utente e anche un'altra vista che mostra ad
esempio il mio testo di fallback, no posizione scelta ma che verrà successivamente sostituita per una piccola anteprima del luogo
su una mappa, quindi
è qualcosa che aggiungerò in seguito. Ora qui sul pulsante, quindi
dirò ottenere la posizione dell'utente, ad esempio, impostare il colore su Colori. primario e per questo, come sempre, assicurati di importare i
colori costantemente e fino a quando premo questo, non sorprende che voglia iniziare a recuperare la
posizione dell'utente.
Quindi qui aggiungerò una nuova costante, ottengo il gestore della posizione, che è una funzione che utilizzerà quindi l'API di posizione che abbiamo appena installato per
ottenere la posizione dell'utente ed è ciò che innesco quando faccio clic su questo pulsante.
Ora per lo styling qui, aggiungerò un selettore della posizione dello stile, in questa vista qui aggiungerò un'altra anteprima della mappa dello stile, potremmo
anche dare uno stile a questo testo ma mi atterrò al valore predefinito e
ora aggiungerò questi due stili a il foglio di stile, quindi qui selettore di posizione, lì aggiungerò un margine in fondo diciamo 15 e
sull'anteprima della mappa, lì aggiungerò anche un margine in fondo diciamo 10 e la larghezza del 100% a prendi tutta la larghezza disponibile, un'altezza di forse
150 e anche il colore del bordo di questo colore grigiastro
con il codice esadecimale #ccc e una larghezza del bordo di uno, è un po 'come
la finestra di anteprima dell'immagine. Con questo, abbiamo impostato questo componente, ora possiamo
includerlo nella schermata del nuovo posto.
Quindi, in quel componente dello schermo, importerò il selettore della posizione dai componenti, il selettore della posizione in questo modo e lo aggiungerò
nel codice jsx sotto il selettore di immagini, proprio così.
Se ora lo salviamo e diamo un'occhiata, vediamo questa casella qui.
Ora, quando faccio clic su Ottieni posizione utente, non sorprende l'idea che inizi a ottenere la posizione dell'utente.
Per questo, nel nostro componente selettore di posizione, dovremo importare alcune cose qui: importeremo tutto come posizione dal
pacchetto di ubicazione expo che abbiamo appena installato. Inoltre per la posizione, proprio come
per la fotocamera, dovremo richiedere i permessi, quindi importeremo tutto come permessi
dalle autorizzazioni expo, che è anche richiesto. Con quello aggiunto qui nel gestore della posizione get, voglio prima di tutto controllare i miei
permessi e, per questo, posso copiare l'approccio che uso nel selettore di immagini. Lì abbiamo questa funzione di verifica delle autorizzazioni che
ovviamente potremmo quindi esternalizzare e scrivere in un modo più generico per lavorare in
diversi componenti, qui lo copierò, verificherò le autorizzazioni. Ovviamente qui, non sto chiedendo il
rullino fotografico ma una posizione e devi concedere le autorizzazioni di posizione per utilizzare questa app e ora verificare
che le autorizzazioni vengano eseguite qui nel gestore get location. Possiamo usare async wait qui di nuovo per attendere il
risultato di questo controllo, quindi l'autorizzazione è ciò che voglio controllare qui e, in caso contrario, quindi se non abbiamo le
autorizzazioni, allora tornerò qui, non c'è è necessario continuare perché
non ci sarà consentito comunque recuperare la posizione. Ora altrimenti possiamo continuare e ora possiamo usare
il pacchetto di posizione per ottenere la posizione corrente asincrona e questo fa ciò che implica il nome,
ottiene la posizione dell'utente corrente. Ora localizzare l'utente può richiedere del tempo, motivo per cui
si tratta di un'attività asincrona e perché restituisce una promessa, una promessa che si risolverà una volta ottenuta
la posizione dell'utente o che verrà rifiutata se non viene recuperata. Possiamo anche configurarlo con un oggetto
che gli passi, di nuovo come sempre nei documenti ufficiali che hai imparato
tutto su tutte le opzioni che puoi impostare lì. Ad esempio, un'opzione che puoi impostare è il timeout e
impostarlo su cinque secondi per assicurarci che se non riusciamo a recuperare una posizione per cinque secondi, smettiamo
di provare e
lanciamo un errore, quindi la promessa verrà quindi respinta.
Ora possiamo aspettarlo e, naturalmente, inserirlo in un blocco try catch, è importante assicurarsi di gestire gli errori
se non riusciamo a recuperare una posizione. Qui userò semplicemente il componente di avviso
che sto già importando per inviare un avviso, impossibile recuperare la posizione e quindi qui, riprovare più tardi o selezionare una
posizione sulla mappa, che non è possibile in questo momento ma che noi ' Presto aggiungerò
e qui un pulsante in cui diciamo OK. Quindi è un avviso che mostro se il recupero della posizione non riesce
per qualche motivo,
altrimenti qui mi aspetto di recuperare una posizione,
quindi è il risultato di questa promessa alla fine,
una posizione che possiamo usare.
Ora possiamo quindi utilizzare questa posizione con l'aiuto dello stato d'uso per gestire alcuni stati interni qui, questa è
la posizione selezionata e impostare la posizione selezionata e lì, possiamo chiamare lo stato d'uso che non ha un valore
iniziale qui
e poi qui nel gestore della posizione, possiamo impostare la posizione selezionata su qualcosa, dovremo vedere cosa
per ora, su null ma prima di impostare qualcosa qui, in realtà consoliamo la
posizione del registro per avere un'idea di ciò che c'è dentro.
Ora voglio anche mostrare uno spinner mentre stiamo recuperando, quindi gestirò un altro stato qui e
questo è lo stato di recupero e inizialmente, questo è ovviamente falso ma inizialmente non stiamo recuperando
ma poi qui nella posizione
get gestore, prima di iniziare a ottenere la posizione, imposterò il recupero su true e una volta che avremo
finito e ciò
includerà anche se avessimo un errore, quindi in
seguito lo ripristineremo su false e ora possiamo usare è il recupero per mostrare uno spinner mentre stiamo recuperando.
Quindi qui se il recupero è vero, mostrerò l'indicatore di attività e solo altrimenti, mostrerò questo testo e in
seguito ovviamente non solo mostreremo il testo ma mostreremo anche uno snippet di mappa.
Ora è possibile configurare l'indicatore di attività, possiamo
impostare la dimensione su grande e il colore su Colori. primario se vuoi. Con tutto ciò, torniamo indietro e
provalo qui su iOS perché mentre non
posso aggiungere un'immagine qui, almeno posso controllare la posizione e fare clic su Ottieni
posizione utente e ora mi viene chiesto se voglio concedere permessi che voglio consentire,
consenti sempre e vedi quel filatore, è super veloce perché è un simulatore, inoltre simula la posizione, non è
la vera posizione del tuo computer su cui stai eseguendo questo, invece
è una posizione fittizia predefinita a San Francisco e qui su Android, è la stessa, se faccio clic
su Ottieni posizione utente qui, devo concedere le autorizzazioni e una volta che l'ho fatto, vedi lo spinner qui e poi
non vedi altro che nei registri ovviamente vedi qualcosa. Lì vedi gli oggetti che venivano registrati
dove hai un oggetto secondario coords, per così dire un campo chiamato coords e l'oggetto
che è un altro oggetto con la precisione e quindi una coppia di longitudine di latitudine che descrive questa
posizione falsa, entrambi i simulatori usano falso posizioni. Hai anche un timestamp.
Quindi ora sappiamo
cosa c'è dentro, quindi possiamo impostare la posizione scelta, ora possiamo impostare questo per dire un oggetto in cui
si memorizza una latitudine di posizione. coordinate. latitudine, ecco cosa c'è dentro, giusto e una longitudine,. lng della
posizione. coordinate. longitudine.
Quindi ora abbiamo quella posizione selezionata disponibile e quella posizione selezionata ora può essere usata per esempio
per mostrare un piccolo frammento
di mappa qui una volta che abbiamo una posizione. Prima di fare solo una piccola cosa, voglio assicurarmi
che sia il testo che il filatore qui siano centrati, quindi sull'anteprima della mappa, in realtà imposterò anche il contenuto giustificato al
centro e allineamo gli elementi al centro, in modo che tutti il contenuto è centrato orizzontalmente e verticalmente, è
solo una piccola cosa,
quindi ora vedi tutto al centro.
Ma con ciò, ora assicuriamoci di mostrare un piccolo frammento di mappa che mostra la posizione scelta dall'utente.