Інтеграція карт і геолокації Особливості в React рідних додатках

ЕКСПО-ПОЗИЦІЯ

Для керованих проектів Expo expo-location пропонує оптимізований API, який керує дозволами, відстеження місця та геокодування з коробки. Він спрощує процес розробки, але обмеження доступу до налаштовуваної кодової настройки—приклад для прототипів або додатків, які не вимагають глибокої інтеграції платформи.

Інші нотвизначні лібрари

• react-native-google-places: Забезпечує автоматичну та розміщує деталі з API Google Places.
• react-native-mapbox-gl: Пропонує користувацькі стилі карти та автономні плитки (не активно підтримується).
• react-native-maps-super-cluster: Додати ефективний кластер маркера для реагування-карт.

Для детального порівняння, наведено офіційну документацію , що є реакт-native-maps та , що є акт-нативно-геолокно-сервіс.

Реалізація карт у додатку

Монтаж і монтаж

За допомогою установки бібліотеки та налаштування конкретних залежностей платформи.

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

Якщо ви використовуєте Google Maps на Android, додайте ключ API до :

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

Для iOS з Google Maps додайте один і той самий ключ до або . Крім того, Apple Maps працює з коробки без ключа API.

Основні компоненти карти

Основна складова , яка приймає пропагувати для визначення початкового видимого простору:

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

і контроль рівня зооопарку. Більші значення показують більш широкий район.

Додавання маркерів і видатків

Маркери на місці розташування на карті. Вони можуть включати назву та опис, показано як каліфорель при натисканні:

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>

Спеціальні маркери та кластери

Замініть шпильку за замовчуванням за допомогою користувацького вигляду за допомогою проп:

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

При роботі з сотнями або тисячами маркерів використовуйте кластери для підвищення продуктивності. Бібліотеки, як , автоматично ручка, що складається з групування та управління зоолотами.

Накладні форми: Поліліни та полігони

Для маршрутів або меж, скористайтеся та компоненти:

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>

Карта сайту

Програматично перемістіть камеру за допомогою або :

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

Доступ до місця розташування користувача

Встановлення реагуючих-геолокно-сервісних послуг

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

Бібліотека вимагає налаштування дозволу на обох платформах. Для Android 6+, запитайте дозвіл на час роботи з використанням або окремої бібліотеки, як . На iOS включає або ключ в .

Отримання однієї позиції

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

Постійне відстеження місця

Для реального часу руху (наприклад, відстеження фітнесу), використання :

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

Розташування фону

Для додатків, які потребують оновлення розташування навіть при фоні (наприклад, відстеження доставки), потрібні додаткові кроки:

• iOS: Увімкнути Background Modes] можливість та перевірте "Повчання оновлення". Використовуйте для акумуляторних оновлювань.
• Android:] Використовуйте передовий сервіс з постійним повідомленням. Бібліотека забезпечує і комунальні послуги.

Завжди отримайте відповідні дозвіл перед наданням фонового відстеження, і повідомляють користувачів, які чітко відповідають інструкції з зберігання додатків.

Зловживання Найкращі практики

Заявки на дозвіл на дозвіл на роботу після того, як користувач має контекст, для чого потрібне місце. Скористайтеся бібліотекою, як , щоб керувати дозволами на крос-платформу:

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

Відповідайте повідомлення, що вказується, чому потрібне місце та направляється користувачеві налаштування системи.

Помилка Handling і Edge Cases

• Пропуск відхилено: Задняти назад в область за замовчуванням або підказувати користувача, щоб увімкнути місце з налаштувань.
• Повчання: Коли GPS сигнал втрачений в приміщенні, скористайтеся для прийняття кешованих даних. Показник "Locating...".
• Помилки роботи: завантаження карти може не впустити, якщо немає інтернету. Відправляйте заставу або в автономному режимі повідомлення.
• Чайви: Встановити розумний (наприклад, 15 секунд) і повідомити користувача.

Оптимізація продуктивності

Зменшити необхідні ремені

• Зніміть і об'єкти для запобігання повторного використання на кожній зміні стану.
• Використовуйте для дочірніх компонентів, таких як спеціальні маркери.
• Останні оновлення розташування в

Оновлення карти ліміту

• Використовуйте для оновлення лише при переході користувача мінімальної відстані.
• Уникайте повторного запуску всієї карти, зберігаючи дані маркерів у , коли набір маркера не змінюється.

Управління кластерами

При відображенні багатьох маркерів, ввімкніть кластеризацію або навантаження тільки маркери, які видно в поточного порту з використанням .

Платформа-Спеціальні характеристики

ОЗЕРА

• Apple Maps не вимагає ключа API, але не вистачає деяких функцій Google Maps, таких як 3D будівлі та внутрішня навігація.
• Для Google Maps на iOS необхідно додати ключ API до і посилання на Google Maps SDK.
• Пам'ятайте, що для локалізації

Електронний

• Google Maps вимагає ключа дійсного API в проявляється. Отримайте його від хмарного консолі Google і ввімкніть "Maps SDK для Android".
• На певних пристроях, пункти mock можуть заважати для виявлення.
• Використовуйте послуги для розміщення фону. Додаток повинен відображати повідомлення, щоб залишити живий.

Особливості місцезнаходження тестування

• Використовуйте тренажери для тестування карт і локаціях збоку. У Xcode ввімкніть "Об'єкт Simulate" для встановлення будь-якої координати.
• Для Android Studio використовуйте "Extended Controls" для надсилання даних GPS.
• Тест на реальні пристрої для перевірки точності GPS, діалогів дозволу та поведінки відстеження фону.
• Написати тести на логіку дозволу та тести UI з інструментами, такими як або .

Зовнішні ресурси

• реакт-нативно-мапа сайту GitHub Repository
• react-native-geolocation-service GitHub Репозиторій
• Документація Google Maps[
• Apple MapKit Документація

Висновок

Інтеграція карт і геолокації в React Native apps перетворює статичні інтерфейси в динамічні, місцезнаходження-просування досвід. За допомогою важільних бібліотек, таких як реагаційні карти і реагування-геолокно-сервіс, розробники можуть додати карти функціонального часу, відстеження часу користувача і безшовне обслуговування дозволу. Зверніть увагу на відмінності платформ, оптимізація продуктивності і конфіденційність користувачів забезпечує полірований, надійний додаток. З шаблонами і кращими практиками, викладеними тут, ви оснащені для побудови виробничих функцій, які радять користувачів.