1 00:00:02,100 --> 00:00:09,600 Per visualizzarlo su una mappa, abbiamo questo componente della schermata della mappa che attualmente ha solo dei contenuti fittizi e ora dobbiamo 2 00:00:09,600 --> 00:00:15,800 essere in grado di eseguire il rendering di una mappa interattiva e per questo, expo ci ha coperto. 3 00:00:15,870 --> 00:00:17,880 Qui trovi il pacchetto di 4 00:00:18,970 --> 00:00:20,810 visualizzazione della mappa. 5 00:00:20,850 --> 00:00:25,840 Ora questo dietro le quinte utilizza un pacchetto chiamato Mappe native di React che puoi usare anche in 6 00:00:25,840 --> 00:00:30,220 app non expo, dal momento che molti di questi pacchetti possono essere usati in app 7 00:00:30,220 --> 00:00:33,950 non expo ed è qualcosa a cui tornerò nelle app di costruzione senza 8 00:00:34,060 --> 00:00:38,480 modulo expo, ma per ora possiamo semplicemente installarlo comodamente eseguendo questo comando e questo installerà il 9 00:00:38,500 --> 00:00:40,630 pacchetto di mappe native di React 10 00:00:40,640 --> 00:00:43,820 e quindi possiamo usarlo come lo vediamo qui in questo esempio. 11 00:00:43,900 --> 00:00:49,660 A proposito, controlla anche la documentazione ufficiale a questo link per vedere altri esempi di utilizzo lì perché 12 00:00:49,660 --> 00:00:52,660 lì, puoi imparare tutto su come usare questo 13 00:00:52,660 --> 00:00:56,300 pacchetto, alcuni esempi sono anche mostrati qui in questo modulo ovviamente. 14 00:00:56,410 --> 00:01:01,810 Quindi eseguiamo expo install reagire-native-maps per installare questo pacchetto qui e questo ci permetterà 15 00:01:01,810 --> 00:01:06,160 quindi di usare vari componenti che rendono le mappe interattive. 16 00:01:06,160 --> 00:01:12,860 Quindi aspettiamo che finisca e con quello finito, nel componente della schermata della mappa, possiamo iniziare a usare quella 17 00:01:12,860 --> 00:01:13,300 mappa. 18 00:01:15,730 --> 00:01:26,160 Ora, lì dentro, per usare la mappa, possiamo importare la vista della mappa dalla mappa nativa di React, quindi da questo pacchetto abbiamo appena 19 00:01:26,160 --> 00:01:31,150 installato e questo ci permetterà di renderizzare una mappa sullo schermo. 20 00:01:31,200 --> 00:01:32,730 Ora come funziona? 21 00:01:32,730 --> 00:01:38,880 Bene, andiamo qui nella nostra schermata della mappa e invece di restituire questa vista qui, restituirò una vista 22 00:01:39,630 --> 00:01:41,340 della mappa in quel modo. 23 00:01:41,370 --> 00:01:43,470 Ora la vista della mappa può essere un tag 24 00:01:43,470 --> 00:01:47,910 a chiusura automatica per ora, in seguito possiamo anche aggiungere alcuni marcatori lì dentro, ma per ora rendiamolo così e 25 00:01:48,180 --> 00:01:51,530 ora devi configurare questa vista della mappa. Per essere precisi, ha 26 00:01:51,540 --> 00:01:58,310 bisogno di puntelli di una regione che gli dica su dove dovrebbe essere focalizzato quando si carica, quindi su 27 00:01:58,440 --> 00:02:03,990 quale parte della mappa o su quale parte del mondo dovrebbe concentrarsi quando si carica. 28 00:02:03,990 --> 00:02:12,770 Quindi abbiamo bisogno di creare una tale regione qui e lo memorizzerò in una regione della mappa con 29 00:02:12,770 --> 00:02:20,810 nome costante e una regione è in realtà un oggetto con quattro proprietà e devi nominarle 30 00:02:20,840 --> 00:02:24,470 in questo modo: latitudine e non 31 00:02:27,360 --> 00:02:32,680 lat ma davvero latitudine scritta, longitudine, latitudine Delta e longitudine Delta. 32 00:02:32,830 --> 00:02:41,430 I delta fondamentalmente impostano il fattore di zoom perché questo descrive lo spazio che puoi vedere intorno al 33 00:02:41,490 --> 00:02:45,450 centro che descrivi con questi due punti. 34 00:02:45,480 --> 00:02:48,690 In modo che descriva un punto, insieme ai 35 00:02:48,690 --> 00:02:51,030 due delta, descrive una superficie. 36 00:02:51,080 --> 00:02:54,890 Quindi ora qui, possiamo iniziare con alcuni 37 00:02:54,890 --> 00:02:58,820 valori fittizi prima di poi assicurarci che possiamo prepopolarlo. 38 00:02:58,820 --> 00:03:03,980 Quindi qui, lo imposterò su un valore fittizio di 37. 78 e -122. 43 che 39 00:03:03,980 --> 00:03:11,900 si trova nella Bay Area attorno alla sede di Google e qui, 40 00:03:11,900 --> 00:03:18,080 latitudeDelta prenderà 0. 0922 e poi 0. 0421, ho scoperto 41 00:03:18,080 --> 00:03:21,030 che funziona abbastanza bene come regione. 42 00:03:21,080 --> 00:03:27,120 Ovviamente puoi sperimentare con questi numeri, ma alla fine passa qui in questa area della mappa. 43 00:03:27,200 --> 00:03:30,020 Ora questo dovrebbe rendere una mappa sullo schermo, ora dobbiamo 44 00:03:30,110 --> 00:03:32,320 solo essere in grado di raggiungerla e 45 00:03:32,330 --> 00:03:37,000 per questo fammi tornare al selettore di posizione e voglio raggiungerla in due modi diversi: uno è 46 00:03:37,010 --> 00:03:42,380 con l'aiuto di un pulsante che non ho ancora aggiunto. Oltre al pulsante Ottieni posizione utente, voglio 47 00:03:42,390 --> 00:03:48,730 avere un secondo pulsante che dovrebbe trovarsi accanto al primo, quindi aggiungerò una vista per 48 00:03:48,730 --> 00:03:53,830 avvolgere entrambi e quindi spostare questo pulsante qui e avere un secondo 49 00:03:53,830 --> 00:04:01,400 pulsante lì e questo pulsante sarà generalmente configurato allo stesso modo, ma dirò pick on map e, naturalmente, attiverò 50 00:04:01,400 --> 00:04:09,740 un metodo diverso, funzione diversa, qui voglio attivare una funzione che è il gestore pick on map e quindi userò 51 00:04:09,740 --> 00:04:10,870 questo qui 52 00:04:10,940 --> 00:04:16,220 ed è un modo per selezionarlo. L'altro modo di selezionare questo o di 53 00:04:16,220 --> 00:04:22,900 andare sulla mappa è facendo clic sull'anteprima della mappa. Ora, prima di implementarlo, consentitemi di definire rapidamente questa vista che contiene i due pulsanti. 54 00:04:22,900 --> 00:04:30,460 Gli darò un identificatore di stile delle azioni e poi laggiù, le azioni possono essere configurate in modo 55 00:04:30,460 --> 00:04:31,620 relativamente semplice. 56 00:04:32,930 --> 00:04:38,720 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 57 00:04:38,720 --> 00:04:45,580 intorno per distribuire lo spazio libero disponibile attorno a entrambi i pulsanti, prenderò una larghezza del 58 00:04:45,620 --> 00:04:49,400 100% per questa riga e il gioco è fatto. 59 00:04:49,400 --> 00:04:51,170 Ora con quello, ho i 60 00:04:51,170 --> 00:04:56,510 miei pulsanti qui, ora dobbiamo assicurarci di poter anche toccare l'anteprima della mappa e per questo, 61 00:04:56,510 --> 00:05:03,090 lasciami andare all'anteprima della mappa e avvolgere effettivamente questo, non in una vista ma in un componente toccabile e qui 62 00:05:03,110 --> 00:05:07,700 Userò solo un'opacità tangibile, ovviamente potresti anche scegliere diversi componenti toccabili basati sulla 63 00:05:07,700 --> 00:05:08,260 piattaforma 64 00:05:08,270 --> 00:05:14,000 su cui stai girando, voglio mantenerlo relativamente semplice, quindi sostituirò questa vista con un'opacità tangibile, ho il 65 00:05:14,450 --> 00:05:15,430 mio stile qui, 66 00:05:15,440 --> 00:05:20,750 va bene ma ovviamente ho anche il gestore onPress e lì, voglio innescare una funzione che 67 00:05:20,750 --> 00:05:23,950 mi aspetto di ottenere dall'esterno tramite oggetti di scena. 68 00:05:24,020 --> 00:05:28,210 Chiamerò anche questo suPress ma potresti dare a questo oggetto qualsiasi nome tu voglia. 69 00:05:28,250 --> 00:05:32,030 Questo ora ci consente di aggiungere un puntello onPress sull'anteprima 70 00:05:32,030 --> 00:05:38,030 della mappa, quindi qui nel selettore della posizione, posso ascoltare onPress sull'anteprima della mappa e lì, naturalmente, voglio 71 00:05:38,030 --> 00:05:42,050 attivare la stessa funzione di quando faccio clic sul pulsante giù Là. 72 00:05:42,140 --> 00:05:44,420 Voglio innescare il gestore pick on map, 73 00:05:44,660 --> 00:05:46,490 quindi è quello che faccio. 74 00:05:46,520 --> 00:05:49,790 Ora il gestore pick on map dovrebbe semplicemente andare alla schermata della mappa 75 00:05:49,790 --> 00:05:56,700 a destra, quindi qui possiamo dire oggetti di scena. navigazione. naviga sulla mappa e il gioco è fatto per il secondo. 76 00:05:56,720 --> 00:06:01,760 Quindi, se ora lo salviamo, dovremmo essere in grado di raggiungere questa mappa interattiva a schermo intero dove non possiamo 77 00:06:01,760 --> 00:06:04,140 ancora selezionare un luogo ma almeno possiamo vederlo. 78 00:06:04,160 --> 00:06:09,500 Quindi ora se faccio clic sul plus qui e poi seleziono sulla mappa, 79 00:06:09,600 --> 00:06:15,930 ricevo un errore, ora perché? Bene, questo è totalmente estraneo ai moduli nativi. Potresti ricordare che il puntello di navigazione 80 00:06:15,930 --> 00:06:20,700 è disponibile solo sui componenti che vengono caricati direttamente come schermate che ovviamente il selettore di posizione 81 00:06:20,700 --> 00:06:22,140 non è. Ora ci 82 00:06:22,140 --> 00:06:23,750 sono varie soluzioni alternative, ci 83 00:06:23,760 --> 00:06:26,070 sarebbe un componente di ordine superiore che possiamo 84 00:06:26,080 --> 00:06:29,910 usare, possiamo anche installare un pacchetto di hook specifici per la navigazione di React 85 00:06:30,360 --> 00:06:35,430 ma qui prenderò un approccio semplice e assicurerò solo di avere un puntello di navigazione sul selettore della posizione 86 00:06:35,760 --> 00:06:39,720 di andando nella schermata del nuovo posto che è dove uso il selettore della posizione 87 00:06:39,960 --> 00:06:45,600 e lì imposterò questo puntello di navigazione e puntelli avanti. navigazione che ho a disposizione qui perché 88 00:06:45,600 --> 00:06:49,170 questo è un componente caricato direttamente attraverso un navigatore, quindi ora 89 00:06:49,170 --> 00:06:54,960 sto solo inoltrando l'accesso ai miei oggetti di navigazione. E con ciò se ora torniamo indietro e facciamo 90 00:06:55,680 --> 00:07:00,300 clic su questo, carichiamo questa mappa qui o almeno una schermata della mappa ma 91 00:07:00,320 --> 00:07:01,740 dov'è la mappa? 92 00:07:01,820 --> 00:07:09,290 Beh, la mappa è invisibile perché, e questo è importante, per la tua mappa devi aggiungere 93 00:07:09,290 --> 00:07:15,130 uno stile e qui, aggiungerò stili. mappa e può essere uno stile molto semplice, ma devi 94 00:07:15,140 --> 00:07:18,520 solo definire quanto dovrebbe essere grande perché, per impostazione predefinita, non occuperà spazio. 95 00:07:18,560 --> 00:07:24,410 Quindi semplicemente impostando flex su uno qui e dicendo che dovrebbe occupare tutto lo spazio che ottiene, semplicemente facendo 96 00:07:24,410 --> 00:07:26,840 ciò, ti assicurerai di vedere una mappa. 97 00:07:26,840 --> 00:07:35,360 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, 98 00:07:35,450 --> 00:07:40,490 anche se puoi anche usare Google Maps lì se vuoi, i documenti ufficiali 99 00:07:40,490 --> 00:07:44,680 ti dicono come, su Android usi sempre google maps. 100 00:07:44,690 --> 00:07:46,820 Quindi qui se clicco su Pick sulla 101 00:07:46,910 --> 00:07:53,430 mappa, vedremo anche che una volta caricata quella nuova schermata, eccola qui. Ora, naturalmente, possiamo anche andare a quella schermata facendo 102 00:07:53,430 --> 00:07:55,290 clic sulla nostra anteprima qui, 103 00:07:55,350 --> 00:07:56,580 è quello che 104 00:07:56,580 --> 00:08:00,500 abbiamo impostato correttamente, quindi funziona anche, ovviamente funziona anche su iOS. 105 00:08:00,540 --> 00:08:05,940 E a proposito, l'animazione qui non è super fluida, lo sarà su un dispositivo reale, 106 00:08:05,940 --> 00:08:09,300 quindi non è un problema, è proprio qui sull'emulatore. 107 00:08:09,300 --> 00:08:14,040 Quindi con ciò abbiamo la nostra mappa qui e su questa mappa, possiamo scorrere. Ancora una volta, sul simulatore potrebbe essere un 108 00:08:14,040 --> 00:08:16,620 po 'piccolo, su un dispositivo reale non lo sarà. 109 00:08:16,620 --> 00:08:21,090 Quindi qui puoi scorrere, sarai anche in grado di pizzicare e ingrandire in seguito, quindi puoi fare tutto 110 00:08:21,090 --> 00:08:23,150 questo e con quello, vediamo la mappa. 111 00:08:23,220 --> 00:08:27,570 Ora la mappa è utilizzabile, ma ovviamente non possiamo ancora scegliere un posto lì, quindi questa è 112 00:08:27,600 --> 00:08:29,430 la prossima cosa che dovremo cambiare.