Hướng dẫn dùng react-native-geolocation-service JavaScript

Trong bài đăng này, chúng ta sẽ tìm hiểu cách triển khai Vị trí địa lý trong ứng dụng React Native

Định vị địa lý sẽ tìm vị trí hiện tại của bạn và Mã hóa địa lý cung cấp địa chỉ của bạn (như Tên thành phố, Tên đường phố, v.v.) theo Tọa độ (Vĩ độ và Kinh độ).

Vị trí địa lý là gì?

Tính năng vị trí quen thuộc và nổi tiếng nhất - Định vị địa lý là khả năng theo dõi thiết bị bằng GPS, tháp điện thoại di động, điểm truy cập WiFi, v.v. Định vị sử dụng hệ thống định vị để theo dõi nơi ở của một cá nhân ngay theo vĩ độ và kinh độ, hoặc thực tế hơn là địa chỉ vật lý. Cả thiết bị di động và máy tính để bàn đều có thể sử dụng Định vị địa lý.

Mã hóa địa lý và mã hóa địa lý ngược là gì?

Mã hóa địa lý là phương pháp sửa đổi địa chỉ hoặc mô tả thay thế của một vị trí thành một tọa độ (vĩ độ, kinh độ).

Mã hóa địa lý ngược là phương pháp sửa đổi một tọa độ (vĩ độ, kinh độ) thành một địa chỉ (một phần). Lượng chi tiết trong mô tả vị trí được mã hóa địa lý rất ngược có thể khác nhau. Ví dụ: một cái có thể chứa địa chỉ đầy đủ của tòa nhà gần nhất, trong khi cái khác chỉ có thể chứa tên thành phố và mã bưu điện.

Bạn cũng có thể thích: Định vị địa lý Với Titanium - Phần 1 .

Cấu trúc bài đăng

Chúng ta sẽ đi từng bước để khám phá Vị trí địa lý.

Các bước

• Tạo một ứng dụng React Native đơn giản .
• Cài đặt các Plugin cho Mã hóa địa lý và Định vị địa lý và lấy vị trí của người dùng.
• Nhận vị trí hiện tại của người dùng (Mã hóa địa lý).
• Chuyển đổi Vị trí địa lý của người dùng thành một địa chỉ (Mã hóa địa lý ngược).

Ba mục tiêu chính

• Nhận vị trí của người dùng theo vĩ độ và kinh độ (Vị trí địa lý).
• Chuyển đổi vĩ độ và kinh độ đó thành địa chỉ đường phố (Mã hóa địa lý ngược).
• Cài đặt các plugin cho Mã hóa địa lý và Định vị địa lý và lấy vị trí của người dùng.

Bước 1: Tạo một ứng dụng React Native đơn giản

Nếu bạn biết về phát triển gốc, bạn sẽ quen với giao diện người dùng React Native.
Nó cần Xcode hoặc Android Studio để bắt đầu. Nếu bạn đã cài đặt một trong những công cụ này, bạn sẽ có thể thiết lập và chạy trong vài phút.

Nếu chúng chưa được cài đặt, bạn sẽ mất khoảng một giờ để cài đặt và định cấu hình chúng. React Native CLI Quickstart Giả sử bạn vừa cài đặt Node 10+ , bạn sẽ có thể sử dụng npm để cài đặt tiện ích dòng lệnh React Native cli:

 npm install -g react-native-cli  

Sau đó, chạy các lệnh sau để tạo một dự án React Native mới được gọi là AwesomeProject :

 react-native init AwesomeProject

Để biết chi tiết, bạn có thể kiểm tra liên kết này .

Bước 2: React Native Geolocation Service

Thư viện này được tạo nhằm cố gắng khắc phục sự cố hết thời gian chờ vị trí trên Android bằng cách triển khai React Native của API vị trí địa lý. Thư viện này cố gắng giải quyết vấn đề bằng cách sử dụng API FusedLocationProviderClient mới của Dịch vụ Google Play, được Google đặc biệt đề xuất thay vì API vị trí khung mặc định của Android. Việc sử dụng nhà cung cấp nào dựa trên cấu hình yêu cầu của bạn; nó tự động quyết định và nhắc bạn thay đổi chế độ vị trí nếu nó không đáp ứng cấu hình yêu cầu hiện tại của bạn.

Lưu ý : Yêu cầu vị trí vẫn có thể hết thời gian chờ, vì nhiều thiết bị Android có vấn đề về GPS ở cấp phần cứng hoặc cấp phần mềm hệ thống.

Cài đặt:

yarn add react-native-geolocation-service

npm install react-native-geolocation-service

Thiết lập

Không có thiết lập bổ sung nào được yêu cầu cho Android. Đối với iOS, hãy làm theo các bước sau: 

Để bật Định vị địa lý trong nền, bạn sẽ bao gồm khóa NSLocationAlwaysUsageDescription trong Info.plist và thêm vị trí làm chế độ nền trong tab Khả năng trong Xcode.

Cập nhật Podfile của bạn

pod ‘react-native-geolocation’, path: ‘../node_modules/@react-native-community/geolocation’

Sau đó, chạy   pod installtừ thư mục iOS.

Mã lỗi

Bước 3: Nhận vị trí của người dùng (Mã hóa địa lý)

Vì thư viện này được dùng để thay thế cho API vị trí địa lý của RN, cách sử dụng khá đơn giản, với một số trường hợp lỗi khác cần xử lý.

Một vấn đề cần lưu ý, thư viện này giả định rằng quyền vị trí đã được cấp bởi người dùng, do đó bạn phải sử dụng  PermissionsAndroidđể yêu cầu quyền theo dõi vị trí của người dùng trước khi tạo yêu cầu vị trí.

Để có được vị trí của người dùng, bạn phải nhập Geolocation API từ gói dịch vụ react-native-geolocation-service như thế này.

import Geolocation from ‘react-native-geolocation-service’; 

Sau đó, thêm khối này vào mã của bạn: 

if (hasLocationPermission) { 
	Geolocation.getCurrentPosition( 
		(position) => { 
			console.log(position); 
		}, 
		(error) => { 
			// See error code charts below. 
			console.log(error.code, error.message); 
		}, 
		{ 
      		enableHighAccuracy: true, 
      		timeout: 10000, 
      		maximumAge: 10000 
   		} 
  	); 
}

Vì vậy, sau khi thêm tất cả mã này, tệp của bạn trông giống như sau:

componentDidMount() {
    Geolocation.getCurrentPosition(
        (position) => {
            console.log(position);
        },

        (error) => {
            // See error code charts below.
            console.log(error.code, error.message);
        },
        {
            enableHighAccuracy: false,
            timeout: 10000,
            maximumAge: 100000
        }
    );
}

Bước 4: Định vị địa lý của người dùng vào một địa chỉ (Mã hóa địa lý ngược)

Chúng tôi đã sử dụng gói mã hóa địa lý gốc phản ứng cho Mã hóa địa lý và Mã hóa địa lý đảo ngược. 

Mô-đun này sử dụng API mã hóa địa lý của Google Maps và yêu cầu khóa API để quản lý hạn ngạch. Vui lòng kiểm tra liên kết này để lấy khóa API của bạn.

Cài đặt

npm install –save react-native-geocoding 

Bạn chỉ có thể nhập Geocoder API từ một phản ứng bản địa-mã hóa địa lý gói trong App của bạn.

import Geocoder from ‘react-native-geocoding’;  

Và sau đó bạn phải khởi tạo mô-đun trong ứng dụng của mình

Geocoder.init(“xxxxxxxxxxxxxxxx“); // use a valid API key

// With more options

// Geocoder.init(“xxxxxxxxxxxxxxxxxxx”, {language : “en”}); // set the language

//And use also this code for Geocoding and reverse Geocoding:

    Geocoder.from(41.89, 12.49)
    .then(json => {
        var addressComponent = json.results[0].address_components[0];
        console.log(addressComponent);
    })
    .catch(error =>
        console.warn(error)
    );

Một ví dụ hoạt động về Định vị địa lý và Mã hóa địa lý cho các ứng dụng 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 ? < Text > 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
        },
    });

Phần kết luận

Trong blog này, chúng tôi đã học cách triển khai ứng dụng Geolocation React Native. Chúng tôi cũng đã học cách Chuyển đổi Mã địa lý trong địa chỉ Vị trí trong một ứng dụng React Native đơn giản.

Đọc thêm

• Phản ứng các thành phần gốc trên GitHub để phát triển ứng dụng của bạn .
• Tích hợp ứng dụng React Native với GraphQL và Apollo Client .
• Điều hướng React cơ bản cho các ứng dụng React Native .

5 hữu ích 0 bình luận 49k xem chia sẻ