Integrare mappe e geolocalizzazione nelle applicazioni native React

Integrare mappe e geolocalizzazione nelle applicazioni native React

Le applicazioni mobili di localizzazione sono diventate la norma, offrendo agli utenti esperienze personalizzate e contestuali.React Native, con le sue capacità multipiattaforma, fornisce una solida base per la costruzione di tali applicazioni. Integrare mappe e geolocalizzazione non solo migliora l'impegno degli utenti, ma sblocca anche funzionalità come la navigazione, le notifiche basate sulla posizione e le ricerche di prossimità.

Concetti core: Mappe e geolocalizzazione in React Native

Le mappe nelle applicazioni mobili servono come rappresentazioni visive interattive dei dati geografici. In React Native, le mappe sono tipicamente rese come componenti nativi sostenuti da SDKs della mappa specifica della piattaforma (Google Maps su Android, Apple Maps su iOS, o Google Maps tramite fornitori personalizzati). Geolocation si riferisce alla capacità di ottenere le coordinate reali del dispositivo (latitudine, longitudine) utilizzando GPS, Wi-Fi o reti cellulari.

Insieme, queste caratteristiche alimentano una vasta gamma di casi di utilizzo: display di condivisione del giro, ristoranti, fitness tracker e monitoraggio delle consegne. React Native espone queste funzionalità attraverso librerie di gestione della comunità che collegano i nativi SDK in componenti JavaScript.

Librerie popolari per Mappe e Geolocalizzazione

reagisce-native-maps

Lo standard de facto per l'integrazione delle mappe in React Native, supporta sia Google Maps che Apple Maps attraverso un'API unificata. Le sue caratteristiche includono marcatori personalizzabili, callout, poligoni, poliline, termomap e gestione dei gesti incorporati. La libreria è attivamente mantenuta e ampiamente adottata.

reazione-nativo-geolocation-service

Mentre l'API di React Native è ancora disponibile, è deprecato e non ha un controllo accurato. ]react-native-geolocation-service fornisce una sostituzione moderna e promettente con precisione configurabile, timeout e gestione delle autorizzazioni. Funziona costantemente attraverso iOS e Android con una corretta integrazione nativo.

distribuzione

Per i progetti gestiti da Expo, expo-location[[]] offre un API semplificato che gestisce autorizzazioni, tracciamento della posizione e geocodifica fuori dalla scatola. semplifica il processo di sviluppo ma limita l'accesso alla personalizzazione del codice nativo, ideale per prototipi o applicazioni che non richiedono un'integrazione profonda della piattaforma.

Altre biblioteche degne di nota

Per un confronto dettagliato, fare riferimento alla documentazione ufficiale di react-native-maps[] e react-native-geolocation-service.

Realizzare mappe nella tua App

Installazione e configurazione

Iniziare installando la libreria e configurando le dipendenze specifiche della piattaforma.

npm install react-native-maps
cd ios && pod install

Se si utilizza Google Maps su Android, aggiungere la chiave API al :

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

Per iOS con Google Maps, aggiungere la stessa chiave a o . In alternativa, Apple Maps funziona fuori dalla casella senza alcuna chiave API.

Componente della mappa di base

Il componente principale è , che accetta un prop per definire l'area visibile iniziale:

import MapView from 'react-native-maps';

function MapScreen() {
 const region = {
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 };

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

e ] controllano il livello di zoom. I valori più grandi mostrano una zona più ampia.

Aggiungere Markers e Callouts

I marcatori indicano le posizioni sulla mappa, possono includere un titolo e una descrizione, mostrati come un callout quando cliccato:

import MapView, { Marker, Callout } from 'react-native-maps';

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

Marcatori personalizzati e clustering

Sostituire il perno di marcatore predefinito con una visualizzazione personalizzata utilizzando il prop:

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

Quando si tratta di centinaia o migliaia di marcatori, utilizzare clustering per migliorare le prestazioni. Biblioteche come gestire il raggruppamento e la gestione dello zoom automaticamente.

Forma di disegno: Polinici e Poligoni

Per percorsi o confini, utilizzare [[FLT 15]] e componenti:

import MapView, { Polyline, Polygon } from 'react-native-maps';

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

Animazione della mappa

Spostare programmaticamente la fotocamera usando o :

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

Accesso alla posizione dell'utente

Installazione del servizio di reagenza-nativa-geolocation

npm install react-native-geolocation-service
cd ios && pod install

Per Android 6+, richiedere autorizzazioni di runtime utilizzando o una libreria dedicata come []]. Su iOS, includere il o chiave in []].

Ottenere una posizione unica

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

Monitoraggio continuo della posizione

Per il movimento in tempo reale (ad esempio, il monitoraggio del fitness), usare :

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

Luogo di origine

Per le applicazioni che necessitano di aggiornamenti di posizione anche quando in background (ad esempio, monitoraggio delle consegne), sono necessari ulteriori passaggi:

Sempre ottenere il permesso appropriato prima di abilitare il monitoraggio di sfondo, e informare gli utenti chiaramente di rispettare le linee guida dell'app store.

Le autorizzazioni di gestione delle migliori pratiche

Chiamare le richieste di autorizzazione dopo che l'utente ha il contesto per il motivo per cui è necessario l'ubicazione.

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};

Mantenere la negazione con grazia—ad esempio, mostrare un avviso spiegando perché la posizione è necessaria e guidare l'utente alle impostazioni di sistema.

Gestione degli errori e dei casi di bordo

Ottimizzazione delle prestazioni

Ridurre i ri-render non necessari

Aggiornamenti della mappa di limite

Gestione del cluster

Quando si visualizzano molti marcatori, abilitare il raggruppamento o caricare solo i marcatori visibili nella vista corrente utilizzando .

Considerazioni di Piattaforma-Specifiche

iOS

Android

Caratteristiche della posizione di test

Risorse esterne

Conclusioni

Integrando mappe e geolocalizzazione in React Native, le applicazioni trasformano interfacce statiche in esperienze dinamiche e di localizzazione. Grazie a librerie robuste come le mappe reattive e il servizio di reazione-native-geolocation-service, gli sviluppatori possono aggiungere mappe ricche di funzionalità, monitoraggio degli utenti in tempo reale e gestione dei permessi senza soluzione di continuità.