React Native Geolocation Service: 🌍 Посібник для початківців з відстеження місцезнаходження у вашому додатку

Геолокація є ключовою функцією для багатьох додатків, забезпечуючи такі можливості, як навігація, спільне використання поїздок та сервіси, що залежать від місцезнаходження. У цьому блозі ми розглянемо, як використовувати бібліотеку react-native-geolocation-service для інтеграції геолокації у ваш React Native додаток. 🚀

Що таке react-native-geolocation-service? 🤔

react-native-geolocation-service — це потужна бібліотека для роботи з геолокацією в React Native додатках. Вона надає кращу підтримку та сумісність порівняно з вбудованим navigator.geolocation, особливо для Android.

Чому варто її використовувати? 🤷

📍 Точне та надійне відстеження місцезнаходження.

✅ Працює бездоганно як на Android, так і на iOS.

🚦 Краще вирішує поширені проблеми з геолокацією, порівняно з рідним API.

Крок 1: Встановлення 🔧

Спочатку встановіть бібліотеку за допомогою npm або

npm install react-native-geolocation-service   
# або   
yarn add react-native-geolocation-service

Для iOS встановіть pods:

cd ios && pod install

Крок 2: Налаштування дозволів 🛡️

Дозволи для iOS 🍎

Додайте наступні ключі у файл Info.plist:

NSLocationWhenInUseUsageDescription   
Ми потребуємо вашого місцезнаходження для надання кращих послуг.   
NSLocationAlwaysUsageDescription   
Ми потребуємо вашого місцезнаходження для надання кращих послуг.   
NSLocationAlwaysAndWhenInUseUsageDescription   
Ми потребуємо вашого місцезнаходження для надання кращих послуг.

Дозволи для Android 🤖

Додайте необхідні дозволи у файл AndroidManifest.xml:

Якщо ви орієнтуєтесь на Android 10 (API рівень 29) або вищий, додайте:

Для Android 11 та вище, переконайтеся, що дозволи запитуються правильно під час виконання.

---

Крок 3: Основне використання 💻

Імпортуйте бібліотеку і використовуйте її для отримання місцезнаходження користувача:

import React, { useEffect, useState } from 'react';   
import { View, Text, Button, PermissionsAndroid, Platform } from 'react-native';   
import Geolocation from 'react-native-geolocation-service';

const App = () => {   
 const [location, setLocation] = useState(null);

const requestLocationPermission = async () => {   
 if (Platform.OS === 'android') {   
 const granted = await PermissionsAndroid.request(   
 PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,   
 {   
 title: "Location Permission",   
 message: "This app requires access to your location. 🌐",   
 buttonNeutral: "Ask Me Later",   
 buttonNegative: "Cancel",   
 buttonPositive: "OK",   
 }   
 );   
 return granted === PermissionsAndroid.RESULTS.GRANTED;   
 }   
 return true;   
 };

const getLocation = async () => {   
 const hasPermission = await requestLocationPermission();   
 if (!hasPermission) {   
 return;   
 }

Geolocation.getCurrentPosition(   
 (position) => {   
 setLocation(position);   
 },   
 (error) => {   
 console.error(error);   
 },   
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }   
 );   
 };

return (   

 📌 Місцезнаходження: {location ? JSON.stringify(location) : 'Збір даних...'}   


 );   
};

export default App;

---

Крок 4: Обробка постійних оновлень місцезнаходження 🔄

Для відстеження місцезнаходження в реальному часі використовуйте метод watchPosition:

let watchId;

const startTracking = () => {   
 watchId = Geolocation.watchPosition(   
 (position) => {   
 console.log(position);   
 },   
 (error) => {   
 console.error(error);   
 },   
 { enableHighAccuracy: true, distanceFilter: 0 }   
 );   
};

const stopTracking = () => {   
 if (watchId != null) {   
 Geolocation.clearWatch(watchId);   
 }   
};

Викликайте startTracking для початку і stopTracking для зупинки оновлень місцезнаходження.

---

Поради для кращої продуктивності 🏎️

1.
1. Використовуйте enableHighAccuracy обережно, оскільки це значно збільшує споживання батареї. 🔋

1. Для частих оновлень місцезнаходження використовуйте distanceFilter, щоб встановити мінімальну відстань, після якої буде викликано оновлення місцезнаходження. 📏

2. Завжди уважно обробляйте дозволи користувача, щоб уникнути збоїв додатка. 🚫

---

Висновок ✅

Бібліотека react-native-geolocation-service робить інтеграцію геолокації в додаток простою та ефективною. З точним відстеженням та підтримкою на різних платформах ви можете значно покращити функціональність вашого додатка. 🌟

Щасливого кодування! 💻✨

---

Якщо цей посібник був корисним, не забудьте поставити аплодисменти 👏 і поділитися ним з іншими. Дайте знати в коментарях, якщо у вас є питання або виникають проблеми при реалізації геолокації у вашому React Native додатку! 🌈

Перекладено з: React Native Geolocation Service: 🌍 A Beginner's Guide to Location Tracking in Your App