Integrering av kart og geolocation i React Native Apps

expo-lokalisering

For Expo-drevne prosjekter tilbyr expo-lokalisering en strømlinjeformet API som håndterer tillatelser, plasseringssporing og geokoding ut av boksen. Den forenkler utviklingsprosessen, men begrenser tilgang til hjemmelaget kodetilpassing ⁇ ideal for prototyper eller apper som ikke krever dyp plattformintegrasjon.

Andre minneverdige biblioteker

• react-native-google-places]: gir autofullføring og plasserer detaljer fra Google Places API.
• react-native-mapbox-gl: Tilbyr egendefinerte kartstiler og offline fliser (mindre aktivt vedlikeholdt).
• react-native-maps-super-cluster: Legger til effektiv markørhoping for å reagere-native-kart.

For en detaljert sammenligning, se den offisielle dokumentasjonen til reakt-native-kart og reakt-native-geolocation-service].

Implementere kart i appen din

Installasjon og oppsett

Start med å installere biblioteket og konfigurere plattformspesifikke avhengigheter.

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

Hvis du bruker Google Maps på Android, legger du til API-nøkkelen i :

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

For iOS med Google Maps, legg til samme nøkkel til eller . Alternativt fungerer Apple Maps ut av boksen uten API-nøkkel.

Grunnleggende kartkomponent

Kjernekomponenten er , som aksepterer en proporsjon for å definere det opprinnelige synlige området:

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} />
 );
}

og styrer zoomnivået. Større verdier viser et bredere område.

Legge til merker og utrop

Merkere finner steder på kartet. De kan inneholde en tittel og beskrivelse, vist som en utkalling når de trykkes på:

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>

Tilpassede merker og klynger

Bytt ut standardmarkørstiften med en egendefinert visning ved hjelp av proporen :

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

Når du har med hundrevis eller tusenvis av markører å gjøre, bruk klynger for å forbedre ytelsen. Biblioteker som håndterer gruppering og zoom-nivå styring automatisk.

Tegning Former: Polylines og polygoner

For ruter eller grenser, bruk og komponenter:

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>

Animasjon av kartet

Flytt kameraet på en programmert måte ved hjelp av eller :

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
};

Tilgang til brukerplassering

Installere reak-native-geolocation-service

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

Biblioteket krever tillatelsesoppsett på begge plattformene. For Android 6+, be om kjøretid tillatelser ved hjelp av eller et dedikert bibliotek som . På iOS, inkluderer ] eller nøkkelen i .

Å få en enkelt posisjon

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 }
);

Kontinuerlig plasseringssporing

For bevegelse i sanntid (f.eks. treningssporing), bruk :

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);

Bakgrunnsplassering

For apper som trenger plasseringsoppdateringer selv når det er bakgrunn (f.eks. leveringssporing), kreves det flere trinn:

• iOS: Aktiver Bakgrunnsmoduser evne og sjekk “Stadsoppdateringer”. Bruk ] for batterivennlige oppdateringer.
• Android: Bruk en forgrunnstjeneste med en vedvarende varsling. Biblioteket gir og ] verktøy.

Få alltid den riktige tillatelsen før bakgrunnssporing, og informere brukerne tydelig om å overholde retningslinjene for appbutikk.

Gode øvelser

Forespørsler om oppringingstillatelse etter at brukeren har sammenheng for hvorfor plasseringen er nødvendig. Bruk et bibliotek som til å administrere tillatelser for tverrplattform:

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;
};

Håndtere benektelsesverdig - for eksempel, vis en varsling som forklarer hvorfor plassering er nødvendig og veilede brukeren til systeminnstillinger.

Feilhåndtering og kantsaker

• Permission nektet: Fall tilbake til et standardområde eller spør brukeren om å aktivere plassering fra innstillinger.
• Plassering utilgjengelig: Når GPS-signalet går tapt innendørs, bruk til å akseptere cachedata. Vis en \"Locering...\" indikator.
• Nettverksfeil: Kartlasting kan mislykkes hvis det ikke er noe Internett.
• Tidsutganger: Sett en rimelig (f.eks. 15 sekunder) og informere brukeren.

Performance Optimization

Redusere unødvendige re-redders

• Minne på og objekter for å hindre gjeninntrenging på alle tilstandsendringer.
• Bruk for barnekomponenter som tilpassede markører.
• Throttle eller avslå plasseringsoppdateringer i tilbakekallinger.

Begrens kartoppdateringer

• Bruk til å bare oppdatere når brukeren beveger seg en minste avstand.
• Unngå å gjeninnarbeide hele kartet ved å holde markørdata i en når markørsettet ikke endres.

Administrer Clustering

Når du viser mange markører, kan du bare laste inn eller klynge markørene som er synlige i den gjeldende visningen ved å bruke .

Plattformsspesifikke vurderinger

iOS

• Apple Maps krever ikke en API-nøkkel, men det mangler noen Google Maps-funksjoner som 3D-bygninger og innendørs navigasjon.
• For Google Maps på iOS må du legge til API-nøkkelen til og koble til Google Maps SDK.
• Husk å sette for lokalisering.

Android

• Google Maps krever en gyldig API-nøkkel i manifest. Ta den fra Google Cloud Console og aktiver \"Karter SDK for Android\".
• På visse enheter kan spottesteder forstyrre - bruk til å oppdage.
• Bruk forgrunnstjenester for bakgrunnsplassering. Appen må vise et varsel for å holde seg i live.

Testing av plassering Funksjoner

• Bruk simulatorer til å teste kart og spotte steder. I Xcode, aktivere \"Simuler plassering\" for å sette enhver koordinat.
• For Android Studio, bruk \"Utvidet kontroller\" til å sende GPS-data.
• Test på ekte enheter for å verifisere GPS-nøyaktighet, tillatelsesdialoger og bakgrunnssporing.
• Skriv enhetstester for tillatelseslogikk og UI-tester med verktøy som eller .

Eksterne ressurser

• reakt-native-kart GitHub-arkiv]
• react-native-geococation-service GitHub-arkiv
• Google Maps Platform Dokumentasjon]
• Apple MapKit-dokumentasjon]

Konklusjon

Integrering av kart og geolokalisering i React Native apps forvandler statiske grensesnitt til dynamiske, stedsbevarende opplevelser. Ved å utnytte robuste biblioteker som reakt-native-kart og reak-native-geolocation-service, kan utviklere legge til funksjonsrike kart, sanntidsbrukssporing og sømløs tillatelseshåndtering. Å være oppmerksom på plattformforskjell, ytelsesoptimering og brukerpersonvern sikrer et polert, pålitelig program. Med mønstre og beste praksis som er beskrevet her, er du utstyrt til å bygge produksjonsklare plasseringsbaserte funksjoner som gleder brukerne.