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"/>

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

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

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

<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.定位

到此结束

react native 高德定位 react-native-amap-geolocation相关推荐

高德地图api中AMap.Geolocation在某些浏览器（chrome，safari【ios10以上】）下无法获取到地址
geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', (data)=>{ t ...
Web前端：React Native Web与React — 比较指南
React 是Facebook开发的用于构建交互式用户界面的JavaScript库.React 在 Apache 许可下作为开源软件提供,可用于个人和商业网站.客户端 Web 应用程序和服务器应用 ...
【React Native进阶】React Native Gesture Handler的使用
背景说到React Navtive的性能优化,首先要了解React Native的运行机制.React Native程序主要运行在三个并行的线程上: JS Thread:我们写的JS代码逻辑都是在这 ...
如何在React Native中使用React JS Hooks？
In my articles, I'm going to be using either expo or snack online IDE and android emulator. 在我的文章中,我 ...
reactnative 获取定位_react native 获取地理位置的方法示例
react native 官网介绍了这个 api Geolocation 但是这个api只能返回经纬度所以要把经纬度通过逆地理位置转义 http://recode.ditu.aliyun.com ...
高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案
高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed的解决方法. 前言:此坑踩得我挺难受的,搞了三天需求:进入页面,获取用户具体经纬度并 ...
Android定位开发之百度定位、高德定位、腾讯定位，三足鼎立一起为我所用！
这几天的项目不是非常紧.于是想为未来可能要做的项目做一些技术储备. 下一个项目非常有可能是定位开发,须要用到手机定位功能,于是查了查如今比較流行的第三方定位,最火的基本上就是百度定位>高德定位& ...
深入了解React新引擎：React Fiber
Facebook正在以流行的JavaScript框架React为基础开发一个全新的架构.这个名为React Fiber的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度. ...
如何使用React，TypeScript和React测试库创建出色的用户体验
I'm always willing to learn, no matter how much I know. As a software engineer, my thirst for knowle ...
【React 基础】之 React 基本介绍、jsx 规则、模块与组件
React 全家桶 React 基础 React-Router 路由 PubSub + 消息管理库 Redux 集中式的状态管理 Ant-Design UI 组件库 - React 简介官网英文官 ...

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

react native 高德定位 react-native-amap-geolocation相关推荐

最新文章

热门文章