react-native-amap-geolocation安装与使用

• react-native-amap-geolocation

react-native-amap-geolocation这款插件接入了高德地图定位模块。支持 Android + iOS，提供尽可能完善的原生接口， 同时提供符合 Web 标准的 Geolocation API。

ios下的安装

依次在命令下执行以下2条命令

    yarn add react-native-amap-geolocation
    react-native link react-native-amap-geolocation

如果出现了link的相关报错的话，就需要手动link一下

1. 用xcode打开该项目
2. 点击项目的根目录右键 add File to "项目名"
3. 选择并添加 node_modules/react-native-amap-geolocation/lib/ios/AMapGeolocation.xcodeproj （或从文件浏览器里将该文件拖拽到 Libraries）
4. Build Phases ➜ Link Binary With Libraries 中选择并添加 libAMapGeolocation.a

下载和安装高德IOS SDK

1. 下载基础SDK(含IDFA)
2. 下载定位SDK
3. 将下载的AMapFoundationKit.framework 和 AMapLocationKit.framework 以及 项目自带的ExternalAccessory.framework 添加到 Build Phases ➜ Link Binary With Libraries。

配置权限

高德地图官方文档权限参考

ios8-10权限 NSLocationWhenInUseUsageDescription和NSLocationAlwaysUsageDescription

ios11以上权限 NSLocationAlwaysAndWhenInUseUsageDescription和NSLocationWhenInUseUsageDescription

ios8-ios11+权限NSLocationWhenInUseUsageDescription、NSLocationAlwaysUsageDescription和NSLocationAlwaysAndWhenInUseUsageDescription

苹果官方权限参考

ios11以上权限 NSLocationWhenInUseUsageDescription 和NSLocationAlwaysAndWhenInUseUsageDescription

ios11以下权限 NSLocationAlwaysUsageDescription

权限这个地方得注意。参考了高德和苹果的文档你会发现，他们说发恰恰相反,如果你按照高德和苹果3个权限全给的话或者高德的ios11+的，那你会弹不出权限提示。所以大家请采用以下的权限配置

1. 打开info.plistt
2. 添加NSLocationWhenInUseUsageDescription(表示应用在前台的时候可以搜到更新的位置信息)和NSLocationAlwaysUsageDescription(申请Always权限，以便应用在前台和后台都可以获取到更新的位置数据)
3. App Transport Security Setting展开后的Allow Arbitrary Loads 为YES

这个权限很神奇，只添加NSLocationWhenInUseUsageDescription也可以，前台后台都可以获取到位置，但是3个权限全部添加的话，会出现弹出不了权限提示框的问题。所以大家添加NSLocationWhenInUseUsageDescription或者添加NSLocationWhenInUseUsageDescription和NSLocationAlwaysUsageDescription就可以了。

如果要支持后台持续定位，还需要配置以下

1. 打开xcode，点击项目
2. 选择Capabilities,把Background Modes打开为ON，然后打勾Loaction updates

使用

创建一个position.js,把操作封装起来

import { init, Geolocation,setAllowsBackgroundLocationUpdates} from "react-native-amap-geolocation";
//初始化sdk
export async function geolocationInit() {
    //设置高德key
    await init({
        ios: "你的key",
    });
    
    
    //开启后台定位,必须要Background Modes打开为ON，勾选Loaction updates，不然会报错！
    //必须在开始定位之前或者在定位stop的时候设置
    setAllowsBackgroundLocationUpdates(true);
    
}

//只获得一次当前地理位置
export function getCurrentPosition(){
    Geolocation.getCurrentPosition(position=>console.log(position));
}

//注册一个监听，它会每隔一段时间返回当前地理位置
export function watchPosition(){
    if(!this.watchId){
        this.watchId=Geolocation.watchPosition(position=>console.log(position)));
    }
}

...按照自己的需要封装

创建一个index.js 来使用定位，需要注意一点，高德sdk默认返回逆地理编码信息为false,如果要返回的话在AMapGeolocation.xcodeproj添加_manager.locatingWithReGeocode=YES

import React, { Component } from 'react';
import { SafeAreaView, View } from 'react-native';
import {setInterval} from "react-native-amap-geolocation";
import {getCurrentPosition,watchPosition,getCurrentPosition} from "./position"


export default class Main extends Component {

   componentDidMount() {

        //初始化定位组件
        geolocationInit();

        //启动监听
        watchPosition();

        //获取一次定位,getCurrentPosition会暂停掉监听
        //getCurrentPosition()

        //设置每隔15S获取一次定位
        setInterval(15000);
    }

    render() {
        return (
            
                
                ...ui+操作
                
            
        );
    }
}

官方文档安装指南

官方API文档

官方例子(不了解如何使用，推荐参考)

这里要提醒一下，持续定位第一次获取的时候会返回多条定位信息，注意监听不要多次创建还有像设置间隔获取，或者指定多少距离才更新位置的话，一定要创建监听之后再设置，否则会每次更新位置时返回信息的返回多条信息。在模拟器上开启监听持续定位，不会按照预想的每隔一段时间返回一次地理位置，但是真机会隔一段时间返回一次，一切正常。

安卓只要react-native link成功就不用配置了，如果失败请参考作者github的指南配置。