Integrera Kartor och Geolocation funktioner Reagera infödda appar

Expo-location

För Expo hanterade projekt, ]]expo-location] erbjuder ett strömlinjeformat API som hanterar behörigheter, platsspårning och geocoding ur rutan. Det förenklar utvecklingsprocessen men begränsar tillgången till inbyggd kod anpassning - ideal för prototyper eller appar som inte kräver djup plattform integration.

Andra anmärkningsvärda bibliotek

• ] react-native-google-platser: Ger autokomplett och placera detaljer från Google Places API.
• ] react-native-mapbox-gl]: Erbjuder anpassade kartstilar och offline-plattor (mindre aktivt underhållna).
• ] react-native-maps-super-cluster : Lägger till effektiv markörklustrering för react-native-maps.

För en detaljerad jämförelse, hänvisa till den officiella dokumentationen av ] react-native-maps och ]] react-native-geolocation-service ]].

Genomföra Kartor i din App

Installation och Setup

Börja med att installera biblioteket och konfigurera plattformsspecifika beroenden.

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

Om du använder Google Maps på Android, lägg till din API-nyckel till :

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

För iOS med Google Maps, lägg till samma nyckel till ] eller ]. Alternativt fungerar Apple Maps ur rutan utan någon API-nyckel.

Grundläggande Map Component

Kärnkomponenten är ], som accepterar en ]-prop för att definiera det ursprungliga synliga 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} />
 );
}

och ]]] kontrollerar zoomnivån. Större värden visar ett större område.

Lägga till markörer och Callouts

Markörer identifiera platser på kartan. De kan innehålla en titel och beskrivning, visas som en utrop när de knackas:

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>

Anpassade markörer och kluster

Ersätt standardmarkörstiftet med en anpassad vy med ] prop:

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

När du hanterar hundratals eller tusentals markörer, använd klustring för att förbättra prestanda. Bibliotek som hanterar gruppering och zoomnivåhantering automatiskt.

Rita formar: polylinjer och polygoner

För rutter eller gränser, använd ] och ]] 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>

Animera kartan

Programmatiskt flytta kameran med ] 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
};

Tillgång till användarplats

Installera react-native-geolocation-service

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

Biblioteket kräver tillståndsuppsättning på båda plattformarna. För Android 6+, begära driftstillstånd med eller ett dedikerat bibliotek som ]]]. På iOS, inkludera ] eller ]]] nyckeln i ]].

Få en enda position

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

Fortlöpande platsspårning

För realtidsrörelse (t.ex. fitness tracking), använd :

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

Bakgrundsplats

För appar som behöver platsuppdateringar även när det är i bakgrunden (t.ex. leveransspårning) krävs ytterligare steg:

• iOS:[] Möjliggör ]]]Background Modes[]]] kapacitet och kontrollera "Lokeringsuppdateringar". Använd för batterivänliga uppdateringar.
• Android:] Använd en förgrundstjänst med en ihållande underrättelse. Biblioteket ] ger ]] och ]] verktyg.

Alltid få lämplig tillstånd innan du aktiverar bakgrundsspårning och informera användarna tydligt att följa riktlinjerna för app store.

Behörigheter som hanterar bästa praxis

Ring tillåtelse begäran efter användaren har sammanhang för varför platsen behövs. Använd ett bibliotek som för att hantera gränsöverskridande behörigheter:

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

Hantera förnekelse graciöst - t.ex. visa en varning som förklarar varför plats behövs och vägleda användaren till systeminställningar.

Felhantering och Edge Cases

• ]Permission nekades: ] faller tillbaka till en standardregion eller uppmanar användaren att aktivera plats från inställningar.
• ]Lokation otillgänglig: När GPS-signalen går förlorad inomhus, använd för att acceptera cachade data. Visa en "Lokering ..." indikator.
• ]Nätverksfel: ] Kartladdning kan misslyckas om det inte finns något internet. Gör ett platshållare eller offline-meddelande.
• ]Timeouts: Ange en rimlig (t.ex. 15 sekunder) och informera användaren.

Prestanda Optimization

Minska onödiga återlämnanden

• och ]] objekt för att förhindra återgivning på varje statsförändring.
• Använd för barnkomponenter som tullmarkörer.
• Tala eller avstänga platsuppdateringar i callbacks.

Begränsa kartauppdateringar

• Använd för att bara uppdatera när användaren flyttar ett minimum avstånd.
• Undvik att återge hela kartan genom att hålla markördata i en ] när markören inte ändras.

Hantera Clustering

När du visar många markörer, aktivera klustring eller ladda endast markörerna synliga i den aktuella visningsporten med .

Plattformsspecifika överväganden

iOS

• Apple Maps kräver inte en API-nyckel, men det saknar vissa Google Maps-funktioner som 3D-byggnader och inomhusnavigering.
• För Google Maps på iOS måste du lägga till API-nyckeln till ] och länka Google Maps SDK.
• Kom ihåg att ställa in för lokalisering.

Android Android

• Google Maps kräver en giltig API-nyckel i manifest. Få den från Google Cloud Console och aktivera "Maps SDK för Android".
• På vissa enheter kan spotta platser störa - använd för att upptäcka.
• Använd förgrundstjänster för bakgrundsplats. Appen måste visa en anmälan för att överleva.

Testa platsfunktioner

• Använd simulatorer för att testa kartor och håna platser. I Xcode, aktivera "Simulera plats" för att ställa in någon koordinat.
• För Android Studio, använd "Extended Controls" för att skicka GPS-data.
• Testa på riktiga enheter för att verifiera GPS-noggrannhet, tillståndsdialoger och bakgrundsspårningsbeteende.
• Skriv enhetstest för tillståndslogik och UI-test med verktyg som ] eller ]].

Externa resurser

• ] react-native-maps GitHub Repository
• ] react-native-geolocation-service GitHub Repository
• Google Maps Platform Dokumentation
• Apple MapKit Documentation

Slutsats

Integrera kartor och geolokalisering i React Native-appar omvandlar statiska gränssnitt till dynamiska, platsmedvetna upplevelser. Genom att utnyttja robusta bibliotek som react-native-maps och react-native-geolocation-service kan utvecklare lägga till funktionsrika kartor, realtidsanvändarspårning och sömlös tillståndshantering. Att uppmärksamma plattformsskillnader, prestandaoptimering och användarnas integritet säkerställer en polerad, pålitlig applikation. Med de mönster och bästa praxis här är du utrustad för att bygga produktions-ready-ready-ready-based delight-de funktioner som delight användare.