Per visualizzarlo su una mappa, abbiamo questo componente della schermata della mappa che attualmente ha solo dei contenuti fittizi e ora dobbiamo
essere in grado di eseguire il rendering di una mappa interattiva e per questo, expo ci ha coperto.
Qui trovi il pacchetto di
visualizzazione della mappa.
Ora questo dietro le quinte utilizza un pacchetto chiamato Mappe native di React che puoi usare anche in
app non expo, dal momento che molti di questi pacchetti possono essere usati in app
non expo ed è qualcosa a cui tornerò nelle app di costruzione senza
modulo expo, ma per ora possiamo semplicemente installarlo comodamente eseguendo questo comando e questo installerà il
pacchetto di mappe native di React
e quindi possiamo usarlo come lo vediamo qui in questo esempio.
A proposito, controlla anche la documentazione ufficiale a questo link per vedere altri esempi di utilizzo lì perché
lì, puoi imparare tutto su come usare questo
pacchetto, alcuni esempi sono anche mostrati qui in questo modulo ovviamente.
Quindi eseguiamo expo install reagire-native-maps per installare questo pacchetto qui e questo ci permetterà
quindi di usare vari componenti che rendono le mappe interattive.
Quindi aspettiamo che finisca e con quello finito, nel componente della schermata della mappa, possiamo iniziare a usare quella
mappa.
Ora, lì dentro, per usare la mappa, possiamo importare la vista della mappa dalla mappa nativa di React, quindi da questo pacchetto abbiamo appena
installato e questo ci permetterà di renderizzare una mappa sullo schermo.
Ora come funziona?
Bene, andiamo qui nella nostra schermata della mappa e invece di restituire questa vista qui, restituirò una vista
della mappa in quel modo.
Ora la vista della mappa può essere un tag
a chiusura automatica per ora, in seguito possiamo anche aggiungere alcuni marcatori lì dentro, ma per ora rendiamolo così e
ora devi configurare questa vista della mappa. Per essere precisi, ha
bisogno di puntelli di una regione che gli dica su dove dovrebbe essere focalizzato quando si carica, quindi su
quale parte della mappa o su quale parte del mondo dovrebbe concentrarsi quando si carica.
Quindi abbiamo bisogno di creare una tale regione qui e lo memorizzerò in una regione della mappa con
nome costante e una regione è in realtà un oggetto con quattro proprietà e devi nominarle
in questo modo: latitudine e non
lat ma davvero latitudine scritta, longitudine, latitudine Delta e longitudine Delta.
I delta fondamentalmente impostano il fattore di zoom perché questo descrive lo spazio che puoi vedere intorno al
centro che descrivi con questi due punti.
In modo che descriva un punto, insieme ai
due delta, descrive una superficie.
Quindi ora qui, possiamo iniziare con alcuni
valori fittizi prima di poi assicurarci che possiamo prepopolarlo.
Quindi qui, lo imposterò su un valore fittizio di 37. 78 e -122. 43 che
si trova nella Bay Area attorno alla sede di Google e qui,
latitudeDelta prenderà 0. 0922 e poi 0. 0421, ho scoperto
che funziona abbastanza bene come regione.
Ovviamente puoi sperimentare con questi numeri, ma alla fine passa qui in questa area della mappa.
Ora questo dovrebbe rendere una mappa sullo schermo, ora dobbiamo
solo essere in grado di raggiungerla e
per questo fammi tornare al selettore di posizione e voglio raggiungerla in due modi diversi: uno è
con l'aiuto di un pulsante che non ho ancora aggiunto. Oltre al pulsante Ottieni posizione utente, voglio
avere un secondo pulsante che dovrebbe trovarsi accanto al primo, quindi aggiungerò una vista per
avvolgere entrambi e quindi spostare questo pulsante qui e avere un secondo
pulsante lì e questo pulsante sarà generalmente configurato allo stesso modo, ma dirò pick on map e, naturalmente, attiverò
un metodo diverso, funzione diversa, qui voglio attivare una funzione che è il gestore pick on map e quindi userò
questo qui
ed è un modo per selezionarlo. L'altro modo di selezionare questo o di
andare sulla mappa è facendo clic sull'anteprima della mappa. Ora, prima di implementarlo, consentitemi di definire rapidamente questa vista che contiene i due pulsanti.
Gli darò un identificatore di stile delle azioni e poi laggiù, le azioni possono essere configurate in modo
relativamente semplice.
Voglio che l'oggetto sia posizionato uno accanto all'altro, quindi la direzione flessibile sarà una riga, non una colonna. Il contenuto giustificato può essere spazio
intorno per distribuire lo spazio libero disponibile attorno a entrambi i pulsanti, prenderò una larghezza del
100% per questa riga e il gioco è fatto.
Ora con quello, ho i
miei pulsanti qui, ora dobbiamo assicurarci di poter anche toccare l'anteprima della mappa e per questo,
lasciami andare all'anteprima della mappa e avvolgere effettivamente questo, non in una vista ma in un componente toccabile e qui
Userò solo un'opacità tangibile, ovviamente potresti anche scegliere diversi componenti toccabili basati sulla
piattaforma
su cui stai girando, voglio mantenerlo relativamente semplice, quindi sostituirò questa vista con un'opacità tangibile, ho il
mio stile qui,
va bene ma ovviamente ho anche il gestore onPress e lì, voglio innescare una funzione che
mi aspetto di ottenere dall'esterno tramite oggetti di scena.
Chiamerò anche questo suPress ma potresti dare a questo oggetto qualsiasi nome tu voglia.
Questo ora ci consente di aggiungere un puntello onPress sull'anteprima
della mappa, quindi qui nel selettore della posizione, posso ascoltare onPress sull'anteprima della mappa e lì, naturalmente, voglio
attivare la stessa funzione di quando faccio clic sul pulsante giù Là.
Voglio innescare il gestore pick on map,
quindi è quello che faccio.
Ora il gestore pick on map dovrebbe semplicemente andare alla schermata della mappa
a destra, quindi qui possiamo dire oggetti di scena. navigazione. naviga sulla mappa e il gioco è fatto per il secondo.
Quindi, se ora lo salviamo, dovremmo essere in grado di raggiungere questa mappa interattiva a schermo intero dove non possiamo
ancora selezionare un luogo ma almeno possiamo vederlo.
Quindi ora se faccio clic sul plus qui e poi seleziono sulla mappa,
ricevo un errore, ora perché? Bene, questo è totalmente estraneo ai moduli nativi. Potresti ricordare che il puntello di navigazione
è disponibile solo sui componenti che vengono caricati direttamente come schermate che ovviamente il selettore di posizione
non è. Ora ci
sono varie soluzioni alternative, ci
sarebbe un componente di ordine superiore che possiamo
usare, possiamo anche installare un pacchetto di hook specifici per la navigazione di React
ma qui prenderò un approccio semplice e assicurerò solo di avere un puntello di navigazione sul selettore della posizione
di andando nella schermata del nuovo posto che è dove uso il selettore della posizione
e lì imposterò questo puntello di navigazione e puntelli avanti. navigazione che ho a disposizione qui perché
questo è un componente caricato direttamente attraverso un navigatore, quindi ora
sto solo inoltrando l'accesso ai miei oggetti di navigazione. E con ciò se ora torniamo indietro e facciamo
clic su questo, carichiamo questa mappa qui o almeno una schermata della mappa ma
dov'è la mappa?
Beh, la mappa è invisibile perché, e questo è importante, per la tua mappa devi aggiungere
uno stile e qui, aggiungerò stili. mappa e può essere uno stile molto semplice, ma devi
solo definire quanto dovrebbe essere grande perché, per impostazione predefinita, non occuperà spazio.
Quindi semplicemente impostando flex su uno qui e dicendo che dovrebbe occupare tutto lo spazio che ottiene, semplicemente facendo
ciò, ti assicurerai di vedere una mappa.
Quindi ora con questo, se fai clic su questo, ecco che viene caricata la nostra mappa. Ora anche degno di nota, su iOS usi automaticamente Apple Maps,
anche se puoi anche usare Google Maps lì se vuoi, i documenti ufficiali
ti dicono come, su Android usi sempre google maps.
Quindi qui se clicco su Pick sulla
mappa, vedremo anche che una volta caricata quella nuova schermata, eccola qui. Ora, naturalmente, possiamo anche andare a quella schermata facendo
clic sulla nostra anteprima qui,
è quello che
abbiamo impostato correttamente, quindi funziona anche, ovviamente funziona anche su iOS.
E a proposito, l'animazione qui non è super fluida, lo sarà su un dispositivo reale,
quindi non è un problema, è proprio qui sull'emulatore.
Quindi con ciò abbiamo la nostra mappa qui e su questa mappa, possiamo scorrere. Ancora una volta, sul simulatore potrebbe essere un
po 'piccolo, su un dispositivo reale non lo sarà.
Quindi qui puoi scorrere, sarai anche in grado di pizzicare e ingrandire in seguito, quindi puoi fare tutto
questo e con quello, vediamo la mappa.
Ora la mappa è utilizzabile, ma ovviamente non possiamo ancora scegliere un posto lì, quindi questa è
la prossima cosa che dovremo cambiare.