Integreren van kaarten en geolocatiefuncties in Native Apps react

expo-locatie

Voor Expo beheerde projecten, expo-locatie biedt een gestroomlijnde API die machtigingen, locatietracking en geocodering uit de doos verwerkt. Het vereenvoudigt het ontwikkelingsproces maar beperkt de toegang tot native code aanpassing .ideaal voor prototypes of apps die niet diep platform integratie vereisen.

Andere opmerkelijke bibliotheken

• reageren-native-google-places: Biedt autocompleet en plaatst details van Google Places API.
• react-native-mapbox-gl: Biedt aangepaste kaartstijlen en offlinetegels (minder actief onderhouden).
• react-native-maps-super-cluster: Voegt efficiënte marker clustering toe aan reactie-native-maps.

Voor een gedetailleerde vergelijking, zie de officiële documentatie van react-native-maps en react-native-geolocation-service.

Kaarten implementeren in uw app

Installatie en installatie

Begin met het installeren van de bibliotheek en het configureren van platformspecifieke afhankelijkheden.

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

Als u Google Maps op Android gebruikt, voeg dan uw API-sleutel toe aan de :

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

Voeg voor iOS met Google Maps dezelfde sleutel toe aan of . Apple Maps werkt ook uit het veld zonder een API-sleutel.

Basiscomponent voor de kaart

De kerncomponent is , die een prop accepteert om het initiële zichtbare gebied te definiëren:

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

De en besturen het zoomniveau. Grotere waarden tonen een groter gebied.

Markers en oproepen toevoegen

Markers kunnen locaties op de kaart aanwijzen. Ze kunnen een titel en beschrijving bevatten, die als een oproep worden weergegeven wanneer ze worden afgetapt:

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>

Aangepaste markeringen en clustering

Vervang de standaard markeerderpen door een aangepaste weergave met behulp van de prop prop:

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

Bij het omgaan met honderden of duizenden markers, gebruik clustering om de prestaties te verbeteren. Bibliotheken als hanteren groepering en zoom-niveau beheer automatisch.

Tekenvormen: Polylijnen en veelhoeken

Voor routes of grenzen, gebruik en onderdelen:

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>

Kaart aanmaken

Programmatisch verplaatsen van de camera met behulp van of :

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

Toegang tot de locatie van de gebruiker

Installeren van reactie-native-geolocation-service

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

De bibliotheek vereist toestemmingsopstelling op beide platformen. Voor Android 6+, verzoek runtime permissies met of een toegewijde bibliotheek zoals . Op iOS, omvatten of sleutel in .

Een enkele positie krijgen

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

Continue locatievolging

Voor real-time beweging (bv. fitness tracking), gebruik :

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

Achtergrondlocatie

Voor apps die zelfs op de achtergrond (bijvoorbeeld bezorging) locatie-updates nodig hebben, zijn extra stappen nodig:

• iOS: Schakel de Achtergrondmodus in en controleer
• Android: Gebruik een voorgronddienst met een aanhoudende melding. De bibliotheek voorziet en utility's.

Verkrijg altijd de juiste toestemming voordat u achtergrondtracking toelaat, en licht gebruikers duidelijk in om te voldoen aan de richtlijnen van de appopslag.

Rechten voor de verwerking van beste praktijken

Bel toestemmingsverzoeken nadat de gebruiker een context heeft voor waarom de locatie nodig is. Gebruik een bibliotheek als om cross-platform permissies te beheren:

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

Handle ontkenning sierlijk .b., toon een waarschuwing uitleggen waarom locatie nodig is en begeleiden de gebruiker om systeeminstellingen.

Fout bij het afhandelen van en Rand-gevallen

• Toestemming geweigerd: Terugvallen naar een standaardregio of de gebruiker vragen om locatie vanuit instellingen in te schakelen.
• Locatie niet beschikbaar: Wanneer het GPS-signaal binnen verloren gaat, gebruik om gecachede gegevens te accepteren. Toon een .. Locatie-indicator.
• Netwerkfouten: Kaarten laden kan mislukken als er geen internet is. Plaatshouder of offline bericht sturen.
• Tijden: Stel een redelijke in (bijv. 15 seconden) en licht de gebruiker in.

Prestatieoptimalisatie

Onnodige her-renders verminderen

• Memoiseer de en ] objecten om te voorkomen dat elke staat verandert.
• Gebruik voor kindercomponenten zoals aangepaste markers.
• De locatie updates throtteren of debouncen in terugroep.

Kaartupdates beperken

• Gebruik om alleen bij te werken wanneer de gebruiker een minimale afstand verplaatst.
• Vermijd het opnieuw renderen van de gehele kaart door markergegevens in een te bewaren wanneer de markerset niet verandert.

Clustering beheren

Bij het weergeven van veel markers, alleen de markers zichtbaar in de huidige viewport inschakelen met behulp van .

Platformspecifieke overwegingen

iOS

• Apple Maps heeft geen API-sleutel nodig, maar het mist wel enkele functies van Google Maps zoals 3D-gebouwen en navigatie indoor.
• Voor Google Maps op iOS moet u de API-sleutel toevoegen aan en de Google Maps SDK koppelen.
• Vergeet niet om in te stellen voor lokalisatie.

Android

• Google Maps vereist een geldige API-sleutel in manifest. Verkrijgen van de Google Cloud Console en inschakelen van de .Maps SDK voor Android.
• Op bepaalde apparaten kunnen bespotte locaties de aanwezigheid van verstoren om te detecteren.
• Gebruik voorgronddiensten voor achtergrondlocatie. De app moet een melding tonen om in leven te blijven.

Testen Locatiefuncties

• Gebruik simulatoren om kaarten en spotlocaties te testen. In Xcode kunt u
• Voor Android Studio, gebruik de ..Extended Controls ..om GPS-gegevens te verzenden.
• Test op echte apparaten om GPS-nauwkeurigheid, toestemmingsdialoog en achtergrondtrackinggedrag te verifiëren.
• Schrijf eenheidstests voor toestemmingslogica en UI-tests met gereedschap als of .

Externe middelen

• reageren-native-maps GitHub repository
• reageren-native-geolocation-service GitHub repository
• Google Maps Platform Documentatie
• Apple MapKit Documentatie

Conclusie

Door het integreren van kaarten en geolocatie in React Native-apps transformeert statische interfaces in dynamische, locatiebewuste ervaringen. Door robuuste bibliotheken zoals react-native-maps en react-native-geolocation-service te benutten, kunnen ontwikkelaars functierijke kaarten, real-time gebruikerstracking en naadloze toestemmingsbehandeling toevoegen. Door aandacht te besteden aan platformverschillen, prestatieoptimalisatie en gebruikers privacy zorgt u voor een gepolijste, betrouwbare toepassing. Met de patronen en beste praktijken die hier worden beschreven, bent u uitgerust om productie-ready locatie-gebaseerde functies te bouwen die gebruikers verrassen.