Интеграция карт и особенностей геолокации Реакционные нативные приложения

Интеграция карт и геолокации в React Native Apps

Мобильные приложения, учитывающие местоположение, стали нормой, предлагая пользователям персонализированный контекстный опыт. React Native с его кроссплатформенными возможностями обеспечивает прочную основу для создания таких приложений. Интеграция карт и геолокации не только повышает вовлеченность пользователей, но и разблокирует такие функции, как навигация, уведомления на основе местоположения и поиск по близости. Эта статья предоставляет всеобъемлющее руководство по встраиванию карт и доступу к местоположению устройства в React Native, охватывая основные библиотеки, шаблоны реализации, соображения, касающиеся платформы, и лучшие практики производительности.

Основные понятия: карты и геолокация в React Native

Карты в мобильных приложениях служат интерактивными визуальными представлениями географических данных. В React Native карты обычно визуализируются как нативные компоненты, поддерживаемые картами SDK для конкретной платформы (Google Maps на Android, Apple Maps на iOS или Google Maps через пользовательских поставщиков). Геолокация относится к возможности получения реальных координат устройства (широта, долгота) с использованием GPS, Wi-Fi или сотовых сетей.

Вместе эти функции обеспечивают широкий спектр вариантов использования: дисплеи для совместного использования, ресторанные находки, фитнес-трекеры и отслеживание доставки. React Native раскрывает эти возможности через поддерживаемые сообществом библиотеки, которые объединяют нативные SDK в компоненты JavaScript.

Внедрение карт в ваше приложение

Установка и настройка

Начните с установки библиотеки и настройки зависимостей, характерных для платформы.

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

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

Добавление маркеров и Callouts

Маркеры определяют места на карте, могут включать в себя заголовок и описание, показанные в качестве вызова при нажатии:

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: Включить Режимы фона и проверить «Обновления местоположения». Используйте для обновлений, удобных для батареи.
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;
};

Отказ в обслуживании изящно — например, покажите предупреждение, объясняющее, почему необходимо местоположение, и направьте пользователя к настройкам системы.

Обработка ошибок и Edge Cases

Разрешение отказано: Возврат к области по умолчанию или побудите пользователя включить местоположение из настроек.
Место недоступно: Когда сигнал GPS теряется в помещении, используйте для приема кэшированных данных. Покажите индикатор «Определение местоположения...».
Сетевые ошибки: Загрузка карты может выйти из строя, если нет интернета.
Тайм-ауты: Установите разумный (например, 15 секунд) и сообщите об этом пользователю.

Оптимизация производительности

Уменьшить ненужные ререндеры

В них содержится описание того, что происходит в мире (39, 40 и т.д.).
Используйте для детских компонентов, таких как пользовательские маркеры.
Обновление местоположения в броске или дебюнсации в .

Обновления лимитной карты

Используйте только для обновления, когда пользователь перемещается на минимальное расстояние.
Избегайте повторного отображения всей карты, сохраняя данные маркера в , когда набор маркеров не изменяется.

Управление кластеризацией

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

Конкретные соображения платформы

iOS

Apple Maps не требует ключа API, но в нем отсутствуют некоторые функции Google Maps, такие как 3D-здания и навигация внутри помещений.
Для Google Maps на iOS необходимо добавить ключ API к и связать Google Maps SDK.
Не забудьте установить для локализации.

Android

Google Maps требует наличия действительного ключа API в манифесте. Получите его из Google Cloud Console и включите «Карты SDK для Android».
На некоторых устройствах могут мешать макетные местоположения — используйте для обнаружения.
Используйте службы переднего плана для определения местоположения фона. Приложение должно отображать уведомление, чтобы оставаться в живых.

Тестирование особенностей местоположения

Используйте симуляторы для тестирования карт и макетов местоположения. В Xcode включить «Симулировать местоположение» для установки любой координаты.
Для Android Studio используйте расширенные элементы управления для отправки данных GPS.
Тестирование на реальных устройствах для проверки точности GPS, диалогов разрешений и поведения отслеживания фона.
Напишите тесты блоков для логики разрешения и тесты пользовательского интерфейса с помощью таких инструментов, как или .

Внешние ресурсы

Заключение

Интеграция карт и геолокации в приложения React Native превращает статические интерфейсы в динамические, ориентированные на местоположение. Используя надежные библиотеки, такие как карты-реакции и сервис-геолокации-реакции, разработчики могут добавлять карты с богатыми функциями, отслеживание пользователей в реальном времени и бесшовную обработку разрешений. Уделяя внимание различиям в платформе, оптимизации производительности и конфиденциальности пользователей, обеспечивает отполированное, надежное приложение. С шаблонами и лучшими практиками, изложенными здесь, вы оснащены для создания готовых к производству функций на основе местоположения, которые радуют пользователей.