Integrointi kartat ja geolocation ominaisuudet React native Apps

Sijaintitietoisista mobiilisovelluksista on tullut normi, joka tarjoaa käyttäjille personoituja, kontekstikohtaisia kokemuksia. React Native tarjoaa Platform-ominaisuuksineen vankan perustan tällaisten sovellusten rakentamiselle. Karttojen ja geolocation integrointi ei ainoastaan paranna käyttäjien sitoutumista vaan myös avaa ominaisuuksia, kuten navigointia, sijaintiin perustuvia ilmoituksia ja lähihakuja. Tämä artikkeli tarjoaa kattavan oppaan karttojen ja laitteiden sijainnin sijoittamisesta React Nativeen, joka kattaa olennaiset kirjastot, toteutusmallit, alustakohtaiset näkökohdat ja suorituskykyyn liittyvät parhaat käytännöt.

Ydinkäsitteet: Kartat ja geosijainti React Native

Mobiilisovelluksissa olevat kartat toimivat interaktiivisina visuaalisina kuvakomponentteina maantieteellisestä datasta. React Nativessa kartat renderoidaan tyypillisesti alkuperäisinä komponentteina alustakohtaisen kartan (DK) (Google Maps on Android, Apple Maps on iOS tai Google Maps kautta mukautettujen palveluntarjoajien). Geolocation tarkoittaa kykyä saada laite.

Yhdessä nämä ominaisuudet virtana laaja valikoima käyttötapauksia: kyytien jakaminen näytöt, ravintolan löytäjät, kunto seuranta, ja toimitus seuranta. React Native paljastaa nämä ominaisuudet yhteisöllisessä kirjastoissa, jotka yhdistävät natiivit SDKs osaksi JavaScript komponentit.

Suositut kirjastot kartoille ja geolocation

reactive natiivikartat

Se tukee sekä Google Maps- että Apple Maps -karttoja yhtenäisen API:n kautta. Sen ominaisuuksia ovat muun muassa muokattavissa olevat merkkimerkit, kutsut, monikulmiot, polylinjat, lämpökartat ja sisäänrakennettu eleenkäsittely. Kirjastoa ylläpidetään ja se on laajalti käytössä.

reactive-geolocation-service

Vaikka React Native.s ydin API on edelleen saatavilla, se on deprecated ja puuttuu hienoksi grained ohjaus. [reaction-native-geolocation-service[ tarjoaa modernin, lupaus-pohjainen korvaaminen konfiguroitu tarkkuus, aikakatkaisu, ja lupakäsittely. Se toimii johdonmukaisesti kautta iOS ja Android asianmukaisen natiivi integrointi.

expo-location

Expo-hallinnoitujen hankkeiden osalta [] Expo-location tarjoaa virtaviivaisen API:n, joka käsittelee käyttöoikeuksia, sijainnin seuranta ja geokoodaus laatikkoon. Se yksinkertaistaa kehitysprosessia, mutta rajoittaa pääsyä natiivin koodin räätälöinnin ...

Muut merkittävät kirjastot

  • reaction-native-google-paikkoja[: Tarjoaa automaattisen täydellisyyden ja paikan tiedot Google Paces API.
  • reaction-native-mapbox-gl[: Tarjoaa omia kartta tyylejä ja offline laatat (vähemmän aktiivisesti ylläpidetään).
  • reaction-native-maps-super-cluster: Lisää tehokkaan merkkien ryhmittelyn reaction-native-maps.

Ks. yksityiskohtainen vertailu []reaction-native-maps- ja -reaction-native-geolocation-service-asiakirjojen virallisista asiakirjoista.

Toteuta kartat sovelluksessasi

Asennus ja asennus

Aloita asentamalla kirjasto ja määrittämällä alustakohtaiset riippuvuudet.

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

Jos käytät Google Maps Android-sovellusta, lisää API-näppäin :

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

Google Mapsin iOS-version osalta lisää sama avain tai . Vaihtoehtoisesti Apple Maps toimii paketista ilman API-näppäintä.

Peruskarttakomponentti

Ydinkomponentti on , joka hyväksyy -propopin, jolla määritellään alkuperäinen näkyvä alue:

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

ja kontrolloivat zoom-tasoa. Suuremmat arvot osoittavat laajemman alueen.

Merkit ja kutsut lisätään

Merkitsee paikantaa paikkoja kartalla. Ne voivat sisältää otsikko ja kuvaus, näytetään kutsun, kun napataan:

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>

Omat merkit ja ryhmittely

Korvaa oletusmerkkitapin omalla näkymällä prop:

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

Kun käsittelet satoja tai tuhansia merkkiaineita, käytä klusterointia suorituskyvyn parantamiseksi. Kirjastot kuten käsittelevät ryhmittelyä ja zoom-tason hallintaa automaattisesti.

Piirustusmuodot: Polylines ja polygons

Reittien tai rajojen osalta käytetään ja osia:

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>

Animoidaan karttaa

Kameran ohjelmallisesti liikutetaan tai :

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

Käyttäjän sijainti

Reaktoinnin ja geolocation-palvelun asentaminen

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

Kirjasto vaatii käyttöoikeuden kummallekin alustalle. Android 6+:lle, pyytää ajo-oikeuksia :lla tai omistettu kirjasto, kuten . iOS:lla on :ssa tai :ssa.

Yhteisen kannan saaminen

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

Jatkuva sijainnin seuranta

Reaaliaikainen liike (esim. kuntoseuranta): :

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

Taustan sijainti

Jos sovellus tarvitsee sijainnin päivityksiä myös taustalla (esim., toimitusseuranta), tarvitaan lisävaiheita:

  • iOS:[] Ota käyttöön []Taustatilan tila[] ja tarkista .
  • Android:[] Käytä tulosaineistoa, josta on jatkuva ilmoitus. Kirjasto tarjoaa ] ja .

Hanki aina asianmukainen lupa ennen kuin mahdollistat taustaseurannan ja ilmoitat käyttäjille selvästi, että sovelluskaupan ohjeet täyttyvät.

Lupakirjojen käyttö parhaiden käytäntöjen käsittely

Soita käyttölupapyyntöihin sen jälkeen, kun käyttäjällä on konteksti siihen, miksi sijaintia tarvitaan. Käytä kirjastoa kuten , jotta voit hallita lautastenvälisiä käyttöoikeuksia:

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

Käsittele kieltäminen hienosti...esim. näytä hälytys, joka selittää, miksi sijainti tarvitaan ja opastaa käyttäjä järjestelmän asetuksia.

Virheiden käsittely ja sivuseikka

  • Lupa evätty:[ Perääntykää oletusalueelle tai kehota käyttäjää ottamaan sijainti käyttöön asetuksista.
  • Sijainti ei ole käytettävissä:[] Kun GPS-signaali katoaa sisätiloissa, käytä hyväksyäksesi välimuistin tiedot. Näytä ...
  • Verkkovirheet:[ Karttalataaminen voi epäonnistua, jos internetiä ei ole.
  • Aikalisät:[ Aseta kohtuullinen (esim. 15 sekuntia) ja ilmoita siitä käyttäjälle.

Suorituskyvyn optimointi

Vähennä tarpeettomia uudelleenjakamisia

  • Muistelkaa ja esineitä, jotta estetään uudelleenkäsittely kaikissa valtionmuutoksissa.
  • Käyttö lasten osille, kuten mukautetuille merkkiaineille.
  • Tuulilasin tai poistolaitteen sijaintipäivitykset -hälytyksissä.

Rajaa karttapäivitykset

  • Käytä päivittää vain, kun käyttäjä liikkuu vähintään etäisyys.
  • Vältä koko karttaa uudelleenkeräys pitämällä merkkitiedot -muodossa, kun merkkisarja ei muutu.

Hallitse klustereita

Kun näytetään useita merkkejä, voidaan ryhmitellä tai kuormittaa ainoastaan nykyisen näkökentän merkit käyttäen .

Alustakohtaiset näkökohdat

iOS

  • Apple Maps ei vaadi API-näppäintä, mutta siitä puuttuu joitakin Google Maps -ominaisuuksia, kuten 3D-rakennuksia ja sisänavigointia.
  • Google Maps on iOS, sinun täytyy lisätä API avain ja linkitä Google Maps SDK.
  • Muista asettaa lokalisointiin.

Android

  • Google Maps vaatii voimassa olevan API-avaimen manifestissa. Hanki se Google Cloud Consolesta ja ota käyttöön ...
  • Tietyillä laitteilla pilkkapaikat voivat häiritä sen havaitsemista.
  • Käytä tausta-asentoa tulosaineistossa. Sovelluksen on näytettävä ilmoitus pysyäkseen elossa.

Testataan sijaintiominaisuudet

  • Käytä simulaattoreita karttojen ja pilkkaa paikkoja. Xcode, voit simuloida sijainti.
  • Android Studiossa käytetään GPS-tietojen lähettämiseen .
  • Testaa oikeita laitteita GPS-tarkkuuden, lupaikkunat ja taustaseuranta.
  • Kirjoita lupalogiikan ja käyttöliittymätestien yksikkötestit työkaluilla, kuten tai .

Ulkoiset resurssit

Päätelmä

Karttojen ja geolocation integrointi React Native -sovelluksiin muuttaa staattiset rajapinnat dynaamisiksi, sijaintitietoisiksi kokemuksiksi. Hyödyntämällä vahvoja kirjastoja, kuten reaction-native-karttoja ja reaction-native-geolocation-palvelua, kehittäjät voivat lisätä ominaisuuksia sisältäviä karttoja, reaaliaikaisia käyttäjäseurantaa ja saumatonta lupakäsittelyä. Kiinnittämällä huomiota alustaeroihin, suorituskyvyn optimointiin ja käyttäjien yksityisyyteen varmistetaan kiillotettu ja luotettava sovellus. Tässä hahmoteltujen mallien ja parhaiden käytäntöjen avulla olet varustettu rakentamaan tuotantoon soveltuvia sijaintiin perustuvia ominaisuuksia, jotka ilahduttavat käyttäjiä.