react native 高德定位 react-native-amap-geolocation

react native开发的时候用到的这个高德的定位模块【react-native-amap-geolocation】

 

支持android和ios，在这里简单的捋一下流程。

一、申请apiKey

由于【react-native-amap-geolocation】使用的高德地图，因此使用前需要先申请apiKey，这里android和ios都要申请。

        1.登录/注册【高德开发平台】

        2.登录后进入应用管理（鼠标移动到右上角的个人头像，点击显示出的【应用管理选项】）

        

         3.创建新应用（右上角头像下面）

        

        输入应用名称和应用类型，这里的应用名称不必和你的项目名称完全一样

         

         4.添加Key

        一开始我们的应用下是空的，这时需要添加key，点击右侧的【添加】按钮，注意安卓和ios是分开的，也就是说如果这两个平台都要使用的话要添加两次

         申请安卓Key选择【Android平台】，必填的有【Key名称、发布版安全吗SHA1、PackageName】官方都有写获取方式，点击【如何获取】可以查看。【调试版安全码SHA1】不是必填，要获取的话可以参照【发布版安全吗SHA1】的【如何获取】另行查询。

【提交】后会生成一个用于android使用的key

如果还需要使用ios平台则再次点击添加

 

 这次选择ios平台，需要的【安全码Bundle ID】同样可以在【如何获取】中查看详细的获取方式

 至此两个平台的key就申请完成了

二、下载安装依赖：

         npm i react-native-amap-geolocation

        或

        yarn add react-native-amap-geolocation

        

三、Android配置流程：

        1.android\app\src\main\AndroidManifest.xml

        添加：

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<uses-permission android:name="android.hardware.location.gps"/>

<!--用于访问wifi网络信息，wifi信息会用于进行网络定位-->

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>

<!--这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->

<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>

<!--用于申请调用A-GPS模块-->

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"></uses-permission>

<!--允许程序设置内置sd卡的写权限-->

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!--允许程序获取网络状态-->

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<!--允许程序读写手机状态和身份-->

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

         2.android\settings.gradle

        添加

include ':react-native-amap-geolocation'

project(':react-native-amap-geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap-geolocation/lib/android')

四、IOS配置

        1.打开【info.plist】 文件添加以下三项，【key是固定的，value描述可以随便写】

                Privacy - Location Always and When In Use Usage Description

                Privacy - Location Always Usage Description

                Privacy - Location When In Use Usage Description

        2.设置打开Location updates

                在TARGETS -》xxxxApp -》Signing & Capabilities -》Background Modes -》 Location updates

                如果没找到【Background Modes】可以按照以下步骤添加

                点击【+】在弹出框中搜索【Background Modes】

五、代码

        1.导入包【一般导入这四个就够用】

                import { init, Geolocation, setAllowsBackgroundLocationUpdates} from "react-native-amap-geolocation"

                 init：用来初始化

                Geolocation：用来定位

                setAllowsBackgroundLocationUpdates：用来配置ios后台定位

        2.初始化

         3.定位

到此结束