Integrarea hărţilor şi caracteristicilor geolocaţiei în aplicaţiile native de reacţionare

Aplicațiile mobile de localizare-conștient au devenit norma, oferind utilizatorilor personalizate, experiențe contextuale. Reacționați Native, cu capacitățile sale de platformă transversală, oferă o bază solidă pentru construirea unor astfel de aplicații. Integrarea hărților și geolocației nu numai că îmbunătățește implicarea utilizatorilor, dar și deschide caracteristici precum navigarea, notificările bazate pe locație și căutările de proximitate. Acest articol oferă un ghid cuprinzător pentru includerea hărților și accesarea locației dispozitivelor în React Native, acoperind biblioteci esențiale, modele de implementare, considerente specifice platformei și bune practici de performanță.

Concepte fundamentale: Hărţi şi geolocaţie în reactivarea nativilor

Hărțile din aplicațiile mobile servesc ca reprezentări vizuale interactive ale datelor geografice. În React Native, hărțile sunt redate de obicei ca componente native susținute de hărțile SDK specifice platformei (Google Maps on Android, Apple Maps on iOS, sau Google Maps via furnizori personalizați). Geolocația se referă la capacitatea de a obține coordonatele din lumea reală a dispozitivului (latitudine, longitudine) utilizând GPS, Wi-Fi sau rețele celulare.

Împreună, aceste caracteristici alimentează o gamă largă de cazuri de utilizare: display-uri de partajare a plimbărilor, găsitoare de restaurante, trackere de fitness și de urmărire a livrării. React Native expune aceste capacități prin bibliotecile întreținute de comunitate care pun pe pod SDKs native în componentele JavaScript.

Biblioteci populare pentru Hărţi şi Geolocaţie

reaction-native-maps

Standardul de facto pentru includerea hărților în React Native. Acesta sprijină atât Google Maps și Apple Maps printr-un API unificat. Caracteristicile sale includ markeri personalizabili, callouts, poligoni, poliline, caldura, și built-in manipulare gest. Biblioteca este menținută activ și larg adoptate.

servicii de geolocație-reacție

În timp ce reacţionează Native

expolocare

Pentru proiectele gestionate Expo, expo-location oferă un API raționalizat care gestionează permisiuni, localizare și geocodare din cutie. Ea simplifică procesul de dezvoltare, dar limitează accesul la personalizarea codului nativ ținând cont de prototipuri sau aplicații care nu necesită integrarea profundă a platformei.

Alte biblioteci de valoare

  • reactive-native-google-places: Oferă detalii autocompletate și plasați din Google Places API.
  • react-native-mapbox-gl: Oferte de stiluri personalizate de hartă și plăci offline (mai puțin întreținute activ).
  • reacție-nativ-maps-super-cluster: Adăugați marker eficient clustering la react-nativ-maps.

Pentru o comparație detaliată, a se vedea documentația oficială reacționa-nativ-maps și reacțion-native-geolocation-service.

Aplicați hărți în aplicația dvs.

Instalarea și configurarea

Începe prin instalarea bibliotecii și configurarea dependențelor specifice platformei.

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

Dacă utilizați Google Maps pe Android, adăugați tasta API la :

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

Pentru iOS cu Google Maps, adăugați aceeași cheie la sau . Alternativ, Apple Maps funcționează din cutie fără nicio cheie API.

Componentă hartă de bază

Componenta centrală este , care acceptă un suport pentru a defini suprafața vizibilă inițială:

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

și controlează nivelul de zoom. Valorile mai mari arată o zonă mai largă.

Adăugarea marcajelor și a apelurilor

Markerele indică locaţiile de pe hartă. Acestea pot include un titlu şi o descriere, prezentate ca un apel la momentul în care au fost puse în aplicare:

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>

Marcatoare personalizate și clustere

Se înlocuieşte acul de marker implicit cu o vizualizare personalizată utilizând suportul :

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

Când se ocupă de sute sau mii de markeri, utilizați gruparea pentru a îmbunătăți performanța. Biblioteci precum maner grouping și managementul la nivel de zoom automat.

Forme de desen: Poliline și poligoane

Pentru rutele sau limitele, utilizați și componente:

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>

Animaţia hărţii

Mută programatic aparatul foto folosind ] sau :

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

Accesez locaţia utilizatorului

Instalarea serviciului de reacție-nativ-geolocație-reacție

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

Biblioteca necesită configurarea permisiunii pe ambele platforme. Pentru Android 6+, solicita permisiuni de rulare folosind sau o bibliotecă dedicată ca . Pe iOS, include tasta sau în .

Obţinerea unei poziţii unice

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

Urmărire continuă a locației

Pentru mișcare în timp real (de exemplu, urmărirea fitness), utilizați :

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

Locație fundal

Pentru aplicațiile care necesită actualizări de locație chiar și atunci când sunt în fundal (de exemplu, urmărirea livrării), sunt necesare pași suplimentari:

  • iOS:[ Activați Modurile de bază capacitatea și verificați actualizările de localizare. Utilizați pentru actualizări prietenoase ale bateriilor.
  • Android: Utilizați un serviciu de prim plan cu o notificare persistentă. Biblioteca furnizează ] și utilități.

Obțineți întotdeauna permisiunea corespunzătoare înainte de a permite urmărirea fundalului și informați în mod clar utilizatorii să respecte orientările privind magazinul de aplicații.

Permisiuni care se ocupă de cele mai bune practici

Solicitări de permisiune după ce utilizatorul are context pentru motivul pentru care este necesară locaţia. Utilizaţi o bibliotecă ca ] pentru a gestiona permisiunile de platformă transversală:

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

Manipulați negarea grațios .g., arată o alertă explicând de ce este necesară locația și ghidează utilizatorul la setările de sistem.

Eroare la manevrare și la îndepărtarea cazurilor

  • Permisiune respinsă: Retrageți-vă într-o regiune implicită sau determinați utilizatorul să activeze locația din setări.
  • Locație indisponibilă: Atunci când semnalul GPS este pierdut în interior, utilizați ] pentru a accepta date cache. Arată o
  • Erori de rețea: Încărcarea hărții poate fi eșuată dacă nu există internet.Rendre un loc titular sau un mesaj offline.
  • Timpuri: Setați un sistem rezonabil (de exemplu, 15 secunde) și informați utilizatorul.

Optimizarea performanței

Reduceți redările inutile

  • Memorează obiectele și pentru a preveni reemiterea fiecărei schimbări de stat.
  • Utilizați ] pentru componente pentru copii, cum ar fi markeri personalizați.
  • Reînnoirea sau deblocarea locaţiei în apelurile telefonice.

Limitează actualizările hărții

  • Utilizați pentru a actualiza numai atunci când utilizatorul se deplasează o distanță minimă.
  • Evitați re-retrimiterea întregii hărți prin păstrarea datelor de marcare într-o atunci când setul de marker nu se schimbă.

Gestionează gruparea

Atunci când afișează mai mulți markeri, permiteți gruparea sau încărcarea numai a markerilor vizibili în spectrometrul curent utilizând .

Considerații specifice platformei

iOS

  • Apple Maps nu necesită o cheie API, dar îi lipsesc unele caracteristici Google Maps, cum ar fi clădiri 3D și de navigație interioară.
  • Pentru Google Maps on iOS, trebuie să adăugați cheia API la și să conectați Google Maps SDK.
  • Amintiţi-vă să setaţi ] pentru localizare.

Android

  • Google Maps necesită o cheie API valabilă în manifest. Obţineţi-o de la Google Cloud Console şi permite
  • Pe anumite dispozitive, locaţiile simulate pot interfera ] pentru a detecta.
  • Utilizați servicii de prim-plan pentru locația de fundal. Aplicația trebuie să afișeze o notificare pentru a rămâne în viață.

Caracteristicile locului de testare

  • Utilizaţi simulatoare pentru a testa hărţi şi locaţii machete. În Xcode, permiteţi
  • Pentru Android Studio, utilizați
  • Test pe dispozitive reale pentru a verifica precizia GPS, dialoguri de permisiune, și comportamentul de urmărire de fond.
  • Se scriu teste de unitate pentru logica permisiunii și teste UI cu unelte precum sau .

Resurse externe

Concluzie

Integrarea hărților și geolocației în aplicațiile Native React transformă interfețele statice în experiențe dinamice, de localizare-conștiente. Prin pârghierea bibliotecilor robuste, cum ar fi react-native-maps și react-native-geolocation-service, dezvoltatorii pot adăuga hărți bogate în caracteristici, urmărirea în timp real a utilizatorilor și manipularea permisiunii fără probleme. Atrăgând atenția asupra diferențelor de platformă, optimizării performanței și confidențialității utilizatorilor asigură o aplicație fiabilă, fiabilă. Cu modelele și cele mai bune practici prezentate aici, sunteți echipați pentru a construi caracteristici bazate pe producție și gata de locație care încântă utilizatorii.