安装
yarn add react-native-amap-geolocation使用
const {coords} = useLocation()
console.log('ccc', coords) // 当前位置，非实时
const {location} = useLocation('watch')
console.log('l333', location.city) // 实时定位useLocation.ts
import React, {useCallback, useEffect, useState} from "react"
import { PermissionsAndroid } from "react-native"
import { init, Geolocation } from "react-native-amap-geolocation"
import {AMAP_ANDROID_KEY} from '@/constants/constants'interface Position {
coords: {
/** 精度 米 */
accuracy: number
altitude?: number
heading: number
latitude: number
longitude: number
speed: number
}
location?: any
}
interface PositionWatch {
coords: {
/** 精度 米 */
accuracy: number
altitude?: number
heading: number
latitude: number
longitude: number
speed: number
}
location: {
accuracy: number
adCode: string
address: string//"重庆市九龙坡区科城支路85号靠近重庆市九龙坡区人力资源和社会保障综合服务中心",
altitude: number
city: string//"重庆市",
cityCode: string//"023",
coordinateType: string//"GCJ02",
country: string//"中国",
description: string//"在重庆市九龙坡区人力资源和社会保障综合服务中心附近",
district: string//"九龙坡区",
errorCode: number//0,
errorInfo: string//"success",
gpsAccuracy: number//-1,
heading: number//0,
latitude: number//29.512879,
locationType: number//2,
longitude: number//106.458555,
poiName: string//"重庆市九龙坡区人力资源和社会保障综合服务中心",
province: string//"重庆市",
speed: number//0,
street: string//"科城支路",
streetNumber: string//"85号",
timestamp: number//1651214072119,
trustedLevel: number// 1
}
timestamp: number
}
type TLocType = 'watch'
function useLocation (): Position
function useLocation (locType: TLocType): PositionWatch
function useLocation (locType?: TLocType): Position | PositionWatch {
const [position, setPosition] = useState({
coords: {
latitude: 0,
longitude: 0,
accuracy: 0,
heading: 0,
speed: 0,
},
location: {}
})/** 初始化 */
const initAMap = useCallback(async () => {
await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
]);
await init({
ios: '',
android: AMAP_ANDROID_KEY
})
}, [])/** 获取当前位置 */
const getPosition = useCallback<() => Promise【React Native 高德地图定位 hooks】>(() => {
return new Promise((resolve, reject) => {
Geolocation.getCurrentPosition(({ coords }) => {
resolve({coords: coords})
}, err => {
reject(err)
})
})
}, [])useEffect(() => {
let wid
async function init() {
await initAMap()
if(locType === 'watch'){
wid = Geolocation.watchPosition((curPosition) => {
setPosition({...curPosition})
}, (err) => {
console.log('实时定位出错：', err)
Geolocation.clearWatch(wid)
})
}else{
const curPos = await getPosition()
setPosition({...curPos, location: {}})
}
}
init()return () => {
locType === 'watch' && Geolocation.clearWatch(wid)
}
}, [initAMap, getPosition, locType])return position
}export default useLocation推荐阅读
- jpush-react-native 推送功能（Android 篇）
- react-native run-android Starting: IntentError type 3 Error: Activity class does not exist
- react-native之远程图片修改后APP不更新
- Creat-React-Native-App 之StackNavigator之踩坑记录
- React-Native 问题随记2（ com.android.builder.testing.api.DeviceException）
- win7下react-native安卓打包踩坑
- 用 jpush-react-native 插件快速集成推送功能（Android 篇）
- React-native初体验（安卓篇）
- react-native安卓接入高德地图