Как использовать геолокацию и геокодирование в React Native приложениях
В этом посте мы узнаем, как реализовать геолокацию в приложении React Native.
Геолокация найдет ваше текущее местоположение, а геокодирование даст ваш адрес (например, название города, название улицы и т. Д.) По координатам (широта и долгота).
Что такое геолокация?
Наиболее известная и знакомая функция определения местоположения - Geolocation - это возможность отслеживать устройство с помощью GPS, вышек сотовой связи, точек доступа WiFi и т.д. Geolocation использует системы определения местоположения для отслеживания местонахождения человека вплоть до широты и долготы, или, более того, практически, физический адрес. Как мобильные, так и настольные устройства могут использовать Geolocation.
Что такое геокодирование и обратное геокодирование?
Геокодирование - это метод ремоделирования адреса или альтернативного описания местоположения в координаты (широта, долгота).
Обратное геокодирование - это метод ремоделирования (широта, долгота) координаты в (частичный) адрес. Количество деталей в обратном геокодированном описании местоположения может отличаться. Например, один из них может содержать полный адрес ближайшего здания, тогда как другой может содержать только название города и почтовый индекс.
Шаг 1. Создание простого приложения React Native
Для начала требуется Xcode или Android Studio. Если у вас уже установлен один из этих инструментов, вы сможете приступить к работе за считанные минуты.
Если они не установлены, вы должны потратить около часа на их установку и настройку. Быстрый старт React Native CLI предполагает, что у вас установлен Node 10+, вы сможете использовать npm для установки утилиты командной строки React Native cli:
npm install -g react-native-cliЗатем выполните следующие команды, чтобы создать новый проект React Native, с названием AwesomeProject:
react-native init AwesomeProjectДля получения подробной информации, вы можете перейти по ссылке.
Шаг 2: Подключаем geolocation-service
Эта библиотека создана для того, чтобы исправить проблему тайм-аута местоположения на Android с помощью реализации React Native API Geolocation. Эта библиотека пытается решить эту проблему с помощью нового API FusedLocationProviderClient сервиса Google Play, который Google настоятельно рекомендует использовать по умолчанию в API-интерфейсе определения местоположения платформы Android. Какой поставщик использовать, зависит от конфигурации вашего запроса; он автоматически решит и предложит вам изменить режим местоположения, если он не удовлетворяет вашей текущей конфигурации запроса.
Примечание. Запросы на определение местоположения могут по-прежнему превышать время ожидания, поскольку многие устройства Android имеют проблемы с GPS на аппаратном или программном уровне.
Установка
yarn add react-native-geolocation-service
npm install react-native-geolocation-serviceНастройка
Никаких дополнительных настроек для Android не требуется. Для iOS выполните следующие действия:
Чтобы включить геолокацию в фоновом режиме, вы должны включить ключ NSLocationAlwaysUsageDescription в Info.plist и добавите местоположение в качестве фонового режима на вкладке «Возможности» в XCode.
Обновление подфайла
pod ‘react-native-geolocation’, path: ‘../node_modules/@react-native-community/geolocation’Затем запустите команду pod install из каталога iOS.
Коды ошибок
1 - PERMISSION_DENIED
Разрешение на местоположение не предоставляется
2 - POSITION_UNAVAILABLE
Поставщик местоположения недоступен
3 - TIMEOUT
Тайм-аут запроса местоположения
4 - PLAY_SERVICE_NOT_AVAILABLE
Сервис Google Play не установлен или имеет более старую версию (только для Android)
5 - SETTINGS_NOT_SATISFIED
Служба определения местоположения не включена или режим определения местоположения не подходит для текущего запроса (только для Android)
6 - INTERNAL_ERROR
Библиотека потерпела крах по какой-то причине или getCurrentActivity() вернула ноль
Шаг 3: Получение местоположения пользователя (геокодирование)
Поскольку эта библиотека предназначалась для замены Geolocation API RN, ее использование довольно простое, с некоторыми дополнительными случаями ошибок, которые необходимо обработать.
Следует заметить одну проблему: эта библиотека предполагает, что разрешение на размещение уже предоставлено пользователем, поэтому вам необходимо использовать запрос PermissionsAndroid на отслеживание местоположения пользователя перед созданием запроса на размещение.
Для получения местоположения пользователя вы должны импортировать Geolocation API из пакетаact-native-geolocation-service следующим образом.
import Geolocation from ‘react-native-geolocation-service’;
Затем добавьте этот блок в ваш код:
if (hasLocationPermission) {
Geolocation.getCurrentPosition((position) => {
console.log(position);
}, (error) => {
// См. таблицы кодов ошибок выше.
console.log(error.code, error.message);
}, {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 10000
});
}
После добавления всего этого кода ваш файл будет выглядеть примерно так:
componentDidMount() {
Geolocation.getCurrentPosition((position) => {
console.log(position);
}, (error) => {
// См. таблицы кодов ошибок выше.
console.log(error.code, error.message);
}, {
enableHighAccuracy: false,
timeout: 10000,
maximumAge: 100000
});
}
Шаг 4. Геолокация пользователя по адресу (обратное геокодирование)
Мы использовали пакет react-native-geocoding для геокодирования и обратного геокодирования.
Этот модуль использует API геокодирования Карт Google и требует ключ API для управления квотами. Перейдите по ссылке, чтобы получить ключ API.
Установка
npm install –save react-native-geocodingВы можете просто импортировать Geocoder API из пакета react-native-geocoding в свое приложение.
import Geocoder from ‘react-native-geocoding’; И тогда вы должны инициализировать модуль в вашем приложении
Geocoder.init(“xxxxxxxxxxxxxxxx“);
// пример установки языка
// Geocoder.init(“xxxxxxxxxxxxxxxxxxx”, {language : “en”});
// И пример использования
Geocoder.from(41.89, 12.49).then(json => {
var addressComponent = json.results[0].address_components[0];
console.log(addressComponent);
}).catch(error => {
console.warn(error)
});
Рабочий пример геолокации и геокодирования в приложениях React-Native.
import React, {
Component
} from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Geocoder from 'react-native-geocoding';
import Geolocation from 'react-native-geolocation-service';
export default class LocationDemo extends Component {
constructor() {
super()
this.state = {
latitude: 0,
longitude: 0,
error: null,
Address: null
}
}
async componentDidMount() {
Geolocation.getCurrentPosition((position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
Geocoder.from(position.coords.latitude, position.coords.longitude).then(json => {
console.log(json);
var addressComponent = json.results[0].address_components;
this.setState({
Address: addressComponent
});
console.log(addressComponent);
}).catch(error => console.warn(error));
}, (error) => {
// See error code charts below.
this.setState({error: error.message});
console.log(error.code, error.message);
}, {
enableHighAccuracy: false,
timeout: 10000,
maximumAge: 100000
});
}
render() {
return (
{
this.state.error ? Error : {this.state.error} : null
}
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#f5fcff',
padding: 11
},
text: {
fontSize: 22,
color: '#000',
textAlign: 'center',
marginBottom: 10
},
});
