В этом посте мы узнаем, как реализовать геолокацию в приложении React Native.
Геолокация найдет ваше текущее местоположение, а геокодирование даст ваш адрес (например, название города, название улицы и т. Д.) По координатам (широта и долгота).
Что такое геолокация?
Самая известная и знакомая функция определения местоположения — Geolocation — это возможность отслеживать устройство с помощью GPS, вышек сотовой связи, точек доступа WiFi и т. Д. Geolocation использует системы определения местоположения для отслеживания местонахождения человека вплоть до широты и долготы, или, более того, практически, Физический адрес. Как мобильные, так и настольные устройства могут использовать Geolocation.
Что такое геокодирование и обратное геокодирование?
Геокодирование — это метод ремоделирования адреса или альтернативного описания местоположения в координаты (широта, долгота).
Обратное геокодирование — это метод ремоделирования (широта, долгота) координаты в (частичный) адрес. Количество деталей в очень обратном геокодированном описании местоположения может отличаться. Например, один из них может содержать полный адрес ближайшего здания, тогда как другой может содержать только название города и почтовый индекс.
Вам также может понравиться: Геолокация с титаном — часть 1 .
Почтовая структура
Мы пойдем шаг за шагом, чтобы изучить геолокации.
меры
- Создайте простое приложение React Native .
- Установите плагины для геокодирования и геолокации и получите местоположение пользователя.
- Получить текущее местоположение пользователя (геокодирование).
- Преобразование геолокации пользователя в адрес (обратное геокодирование).
Три основные цели
- Получить местоположение пользователя по широте и долготе (геолокации).
- Переведите эту широту и долготу в адрес улицы (обратное геокодирование).
- Установите плагины для геокодирования и геолокации и получите местоположение пользователя.
Шаг 1. Создание простого приложения React Native
Если вы знакомы с нативной разработкой, вы будете знакомы с пользовательским интерфейсом 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: Реагировать на службу геолокации
Эта библиотека создана для того, чтобы исправить проблему тайм-аута местоположения на Android с помощью реализации React Native API Geolocation. Эта библиотека пытается решить эту проблему с помощью нового API FusedLocationProviderClient Сервиса Google Play, который Google настоятельно рекомендует использовать по умолчанию в API-интерфейсе определения местоположения платформы Android. Какой поставщик использовать, зависит от конфигурации вашего запроса; он автоматически решит и предложит вам изменить режим местоположения, если он не удовлетворяет вашей текущей конфигурации запроса.
Примечание . Запросы на определение местоположения могут по-прежнему превышать время ожидания, поскольку многие устройства Android имеют проблемы с GPS на аппаратном уровне или на уровне системного программного обеспечения.
Монтаж:
Оболочка
1
yarn add react-native-geolocation-service
2
npm install react-native-geolocation-service
Настроить
Никаких дополнительных настроек для Android не требуется. Для iOS выполните следующие действия:
Чтобы включить геолокацию в фоновом режиме, вы включите ключ NSLocationAlwaysUsageDescription в Info.plist и добавите местоположение в качестве фонового режима на вкладке « Возможности » в XCode.
Обновите свой подфайл
Оболочка
xxxxxxxxxx
1
pod ‘react-native-geolocation’, path: ‘../node_modules/@react-native-community/geolocation’
Затем запустите pod installиз каталога iOS.
Коды ошибок
| ИМЯ | КОД | ОПИСАНИЕ |
|---|---|---|
| В ПРАВАХ ОТКАЗАНО | 1 | Разрешение на местоположение не предоставляется |
| POSITION_UNAVAILABLE | 2 | Поставщик местоположения недоступен |
| АУТ | 3 | Тайм-аут запроса местоположения |
| PLAY_SERVICE_NOT_AVAILABLE | 4 | Сервис Google Play не установлен или имеет более старую версию (только для Android) |
| SETTINGS_NOT_SATISFIED | 5 | Служба определения местоположения не включена или режим определения местоположения не подходит для текущего запроса (только для Android) |
| ВНУТРЕННЯЯ ОШИБКА | -1 | Библиотека потерпела крах по какой-то причине или getCurrentActivity()вернула ноль (только для Android) |
Шаг 3: Получить местоположение пользователя (геокодирование)
Поскольку эта библиотека предназначалась для замены Geolocation API RN, ее использование довольно простое, с некоторыми дополнительными случаями ошибок, которые необходимо обработать.
Следует заметить одну проблему: эта библиотека предполагает, что разрешение на размещение уже предоставлено пользователем, поэтому вам необходимо использовать PermissionsAndroidзапрос на отслеживание местоположения пользователя перед созданием запроса на размещение.
Для получения местоположения пользователя вы должны импортировать Geolocation API из пакетаact-native-geolocation-service , как этот.
import Geolocation from ‘react-native-geolocation-service’;
Затем добавьте этот блок в ваш код:
JavaScript
xxxxxxxxxx
1
if (hasLocationPermission) {
2
Geolocation.getCurrentPosition(
3
(position) => {
4
console.log(position);
5
},
6
(error) => {
7
// See error code charts below.
8
console.log(error.code, error.message);
9
},
10
{
11
enableHighAccuracy: true,
12
timeout: 10000,
13
maximumAge: 10000
14
}
15
);
16
}
Поэтому после добавления всего этого кода ваш файл будет выглядеть примерно так:
JavaScript
xxxxxxxxxx
1
componentDidMount() {
2
Geolocation.getCurrentPosition(
3
(position) => {
4
console.log(position);
5
},
6
(error) => {
8
// See error code charts below.
9
console.log(error.code, error.message);
10
},
11
{
12
enableHighAccuracy: false,
13
timeout: 10000,
14
maximumAge: 100000
15
}
16
);
17
}
Шаг 4. Геолокация пользователя по адресу (обратное геокодирование)
Для геокодирования и обратного геокодирования мы использовали пакет response -native- geocoding.
Этот модуль использует API геокодирования Карт Google и требует ключ API для управления квотами. Пожалуйста, проверьте эту ссылку, чтобы получить ключ API.
Монтаж
npm install –save react-native-geocoding
Вы можете просто импортировать Geocoder API из пакетаact -native-geocoding в свое приложение.
import Geocoder from ‘react-native-geocoding’;
И тогда вы должны инициализировать модуль в вашем приложении
JavaScript
x
1
Geocoder.init(“xxxxxxxxxxxxxxxx“); // use a valid API key
2
// With more options
4
// Geocoder.init(“xxxxxxxxxxxxxxxxxxx”, {language : “en”}); // set the language
6
//And use also this code for Geocoding and reverse Geocoding:
8
Geocoder.from(41.89, 12.49)
10
.then(json => {
11
var addressComponent = json.results[0].address_components[0];
12
console.log(addressComponent);
13
})
14
.catch(error =>
15
console.warn(error)
16
);
Рабочий пример геолокации и геокодирования в приложениях React-Native.
JavaScript
xxxxxxxxxx
1
import React, {
2
Component
3
} from 'react';
4
import {
6
StyleSheet,
7
Text,
8
View
9
} from 'react-native';
10
import Geocoder from 'react-native-geocoding';
12
import Geolocation from 'react-native-geolocation-service';
13
export default class LocationDemo extends Component {
15
constructor() {
16
super()
17
this.state = {
18
latitude: 0,
19
longitude: 0,
20
error: null,
21
Address: null
22
}
23
}
24
async componentDidMount() {
26
Geolocation.getCurrentPosition(
27
(position) => {
28
this.setState({
29
latitude: position.coords.latitude,
30
longitude: position.coords.longitude,
31
});
32
Geocoder.from(position.coords.latitude, position.coords.longitude)
34
.then(json => {
36
console.log(json);
37
var addressComponent = json.results[0].address_components;
39
this.setState({
40
Address: addressComponent
41
})
42
console.log(addressComponent);
43
})
44
.catch(error => console.warn(error));
45
},
46
(error) => {
48
// See error code charts below.
49
this.setState({
50
error: error.message
51
}),
52
console.log(error.code, error.message);
53
},
54
{
56
enableHighAccuracy: false,
57
timeout: 10000,
58
maximumAge: 100000
59
}
60
);
61
}
62
render() {
64
return (
65
<View>
66
<Text>
67
<Text>
68
<Text>
69
{
70
this.state.error ? < Text > Error : {
71
this.state.error
72
} </Text> : null}
73
</View>
74
);
75
}
76
}
77
const styles = StyleSheet.create({
79
MainContainer: {
80
flex: 1,
81
justifyContent: 'center',
82
backgroundColor: '#f5fcff',
83
padding: 11
84
},
85
text: {
86
fontSize: 22,
87
color: '#000',
88
textAlign: 'center',
89
marginBottom: 10
90
},
91
});
Заключение
В этом блоге мы узнали, как реализовать приложение Geolocation React Native. Мы также узнали, как конвертировать геокод по адресу Location в простом приложении React Native.