Table of Contents

Reaksiyon Yerli Uygulamaları ve Jelokasyon Özellikleri

Konum-aware mobil uygulamaları norm haline geldi, kullanıcıların kişiselleştirilmiş, bağlamsal deneyimler sunuyor. Reaksiyon Yerlisi, bu tür uygulamalar oluşturmak için sağlam bir temel sağlar.Tüm haritalar ve geolok sadece kullanıcı etkileşimi geliştirmekle kalmıyor, aynı zamanda navigasyon, konum tabanlı bildirimler ve aramalar gibi özellikleri de ortaya koyuyor.Bu makale, yerel haritaları koymak ve veritabanına erişmek için kapsamlı bir kılavuz sunuyor.

Core Concepts: React Native'de Haritalar ve Geolok

Mobil uygulamalardaki haritalar, coğrafi verilerin interaktif görsel gösterimi olarak hizmet eder.In Reaction Native, haritalar genellikle platforma özgü harita SDK'ları (Google Maps on iOS, veya Google Maps on custom sağlayıcıları aracılığıyla). Geolok, cihazın gerçek dünya koordinatlarını elde etme yeteneğine atıfta bulunur (daha fazla, uzun, uzun veya hücresel ağlar kullanarak).

Birlikte, bu özellikler, geniş bir kullanım vakasına güç verir: yolculuk paylaşımı görüntüler, restoran aramacılar, fitness pistleri ve teslimat takipleri. Reaks Yerli bu yetenekleri topluluk tarafından sunulan kütüphaneleri JavaScript bileşenlerine bağlar.

Haritalar ve Geolokasyon için popüler kütüphaneler

reaksiyon-native-maps

Reaks Yerlisi'ndeki haritaları gömmek için gerçeko standardı, Google Haritalar ve Apple Haritalar'ı birleşik bir API aracılığıyla destekliyor. özellikleri, özelleştirilebilir işaretler, çağrılar, poligonlar, ısımaps ve inşa edilmiş jestler içeriyor.

reaksiyon-hative-geolok-service-service

Reaksiyon Yerlisinin çekirdeği:0) API hala mevcut olsa da, iyi niyetli ve iyileştirilmiş kontrol eksikliğidir. ”Ücretsiz-geolok-service), uygun bir doğrulukla, zamanout ve izinle modern bir şekilde yerine getirir.

expo-location

Expo yönetilen projeler için, [[0)expo-location[Dönetici][Döneticileri ele alan, konum takip ve kutudan geokoding. Geliştirme sürecini basitleştirir, ancak yerel kod özelleştirmesine erişim - prototip veya uygulamalar için derin platform entegrasyonu gerektirmez.

Diğer Notworthy Kütüphaneleri

  • [FONT:0]react-native-google-places[[Dönetici: Google Places API'den otomatik olarak ve yer detaylarını sağlayın.
  • [FONT:0]react-native-mapbox-gl[[Dönetici: Özel harita stilleri ve çevrimdışı karolar (resmi olarak korunmaksızın).
  • [FONT=0]react-native-maps-super-cluster[[Dönetici: 1 ): Resive işaretleyici kümelemeyi reaksiyon-natif-maps.

Detaylı bir karşılaştırma için, resmi belge belgesine bakınız:0)react-native-maps) ve Conact-native-geolok-service).

Uygulamanızda Haritalar Uygulama

Kurulum ve Kurulum

Kütüphaneyi kurmak ve platformu özel bağımlılıkları kurmakla başlayın.

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

Google Haritalar'ı Android'de kullanıyorsanız, API anahtarınızı [[ŞUYGÜ:2) ekleyin:

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

Google Maps ile iOS için, herhangi bir API anahtarı olmadan kutudan dışarı çıkar. Alternatif olarak Apple Maps, kutudan herhangi bir API anahtarı olmadan aynı anahtarı ekleyin.

Temel Harita Kompozitif

Temel bileşen, ilk görünür bölgeyi tanımlamak için bir [[Dönetici” olarak kabul edilen İLFLT:6'dir:

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

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=

Markers ve Callouts

Markers pinpoint lokasyonları haritada. Bir başlık ve açıklama içerebilir, tapped zaman çağrı:

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>

Özel Markers ve Clustering

Varsayılan işaret işaretleyiciyi, belirli bir görüntü ile birlikte değiştirin:WinT:12).

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

Yüzlerce veya binlerce işaretle uğraşırken, performans geliştirmek için kümeleme kullanın. ⁇ FLT:14 gibi kütüphaneler otomatik olarak gruplama ve alt düzey yönetimle çalışır.

Çizim Şekilleri: Polylines ve Polygons

Yollar veya sınırlar için, [[DüzFLT:15) ve [[DüzFLT:16) bileşenleri kullanın:

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>

Mapiting the Map

Programatik olarak kamerayı 03.30 veya [[Dönetici:) kullanarak hareket ettirin:

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

Accessing User Location

Reaksiyon-native-geolok-service

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

Kütüphane her iki platformda da izin yükleme gerektirir. Android 6+ için, istek posta zaman izinleri [[Üyetim:2|0|2|0|2|0|0|2|x|x|x|x|x|x|x|x|x|x|x|x|x|x|x|x|x|x||x|x|x||||x|x||||||||x|||||||||||||x|x|||x|x|x|x|x|x|x||x|x|x|x|x|x||||x|x||||||||x|x|x|x|x||x|x|x|x||||x|x )))) veya s

Tek Bir Pozisyon Olmak

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

Sürekli Yer Takip

Gerçek zamanlı hareket için (örneğin, fitness izleme), [[FONTD:28) kullanın:

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

Arka plan Konum

Arka planda bile yer güncellemelerine ihtiyaç duyan uygulamalar için (örneğin teslimat izleme), ek adımlar gereklidir:

  • [FONT=0)IYOR: [FONT=0))[[[0])))))))))))))))))))))))))))))))))))))))))))))|Dörteçmişler için (geçmişler için (geçmişler) ve kontroller için "Location updates.Use [[Use [[D|DüzFLT:30).
  • [FONT:0) Android:[Dönetici:0) Sürekli bir bildirimle bir ön hizmet kullanın. Kütüphane [FONTD:0) [[[FONTD:0) ve [[FONTD|FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT

Her zaman arka plan izlemesine izin vermeden önce uygun şekilde izin alın ve kullanıcıların uygulama mağazası yönergelerine uymalarını açıkça bilgilendirin.

En İyi Uygulamaları Kullanın İzinleri

Kullanıcının neden yer gerekli olduğu için izin taleplerini arayın.Grup izinlerini yönetmek için bir kütüphane kullanın:

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

Kusura bakma –örneğin, lokasyonun neden gerekli olduğunu ve kullanıcıyı sistem ayarlarına yönlendirdiğini açıklayan bir uyarı gösterin.

Hata işleme ve Edge Cases

  • [FONT:0) İzin inkar etti:[Dönetici:0) Varsayılan bölgeye geri dönün veya kullanıcı ayarların yerini sağlamak için döndürür.
  • [FONT:0]Location mevcut değildir: [Döneticileri kaybettiğinde, [[Gruplama verileri kabul etmek için [[Döneticileri kullanmalı. ”Bir işaretini göster.
  • [FONT:0)Network hataları:[Dönetici:0) Mapload, bir yer sahibi veya çevrimdışı mesaj takmazsa başarısız olabilir.
  • [FONT:0)Timeouts:[[Dönler:[Dönler:[Dönler: · 1|0] makul bir şekilde ayarlayın.(e.g., 15 saniye) ve kullanıcıyı bilgilendirin.

Performans Optimizasyonu

Gereksiz Re-renders

  • Memoize theETHFLT:39) ve [[DüzDÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞ
  • [FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=
  • Throttle veya debounce konum güncellemeleri [FONTD:42] çağrıları.

Limit Map Updates

  • UseFLT:43, kullanıcının minimum mesafe hareket ettiğinde sadece güncellemek için.
  • İşaretin tamamını işaretleyerek işaretleyici verileri bir şekilde değiştirerek tekrarlamaktan kaçının.If avoid re-rendering the entire map by keeping işaretleyici data in aurFLT:44).

Yönetim Yönetimi

Birçok işaretleyiciyi gösterdiğinizde, kümeleme veya yüklemeyi yalnızca mevcut görüntüde görünen işaretleyicileri indirmek için [[GÖRT:45).

Platform-Specificceptations

iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS iOS

  • Apple Maps API anahtarı gerektirmez, ancak 3D bina ve kapalı navigasyon gibi bazı Google Haritalar özellikleri eksik.
  • Google Maps için, API anahtarını Google Maps SDK'yı bağlantıya eklemeniz ve Google Maps SDK'sını bağlantınız gerekir.
  • Yerelleşme için ayarlanan (Düzen) için unutmayın.

Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android Android

  • Google Maps, Google Cloud Console'dan elde etmek ve “Android içinMaps SDK” etkinleştirin.
  • Bazı cihazlarda, alay yerleri müdahale edebilir - tespit etmek için [[ŞUYGÜŞÜŞÜŞÜŞÜŞÜNÜŞÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜN
  • Arka konum için temel hizmetler için kullanın. Uygulama hayatta kalmak için bir bildirim sergilemeli.

Test Konum Özellikler

  • Simülasyonları haritaları ve alay yerleri test etmek için kullanın. Xcode'da, herhangi bir koordinat kurmak için “Simulate Konum” etkinleştirin.
  • Android Stüdyosu için, GPS verilerini göndermek için “Extended Controls” kullanın.
  • GPS doğruluk, izin diyaloglarını ve arka takip davranışını doğrulamak için gerçek cihazlar üzerinde test edin.
  • İzin mantığı ve UI testleri için izin verme testleri, örneğin:FLT:49 veya ESFLT:50 gibi araçlar ile yaz.

Dış Kaynaklar

  • [0][değiştir | kaynağı değiştir]
  • [FONT=0][değiştir | kaynağı değiştir]
  • [0]Google Haritalar Platformu Dokümantasyon[Dönem:0)[Dönemli:0)
  • [0] Apple MapKit Dokümantasyon[[Dönemli: 1)

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Reaksiyon Yerli Uygulamalarındaki haritalar ve geolokasyonlar statik arayüzleri dinamik, konum-aware deneyimlerine dönüştürür.Deneksiyon-eptif-geolok-servis-hücre-servis-hücre-servis-hücre-hücre-hreme-hücre-hücre-hre-kullanıcı haritaları, gerçek zamanlı kullanıcı takip ve sorunsuz izin işlemesi gibi sağlam kütüphaneleri kullanarak.