react native 定位

前端之家收集整理的这篇文章主要介绍了react native 定位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在 react native 中,我们所用的是react native 自带的api定位功能,无需引入第三方js。
react native 定位是通过Geolocation这个模块来实现的。想了解更多关于Geolocation的知识请点击下面 Geolocation自行了解,这里我们主要将他的几个方法
static getCurrentPosition(geo_success,geo_error?,geo_options?)
Invokes the success callback once with the latest location info. Supported options: timeout (ms),maximumAge (ms),enableHighAccuracy (bool) On Android,this can return almost immediately if the location is cached or request an update,which might take a while.

static watchPosition(success,error?,options?)
Invokes the success callback whenever the location changes. Supported options: timeout (ms),enableHighAccuracy (bool),distanceFilter(m)

static clearWatch(watchID)

第一个方法获取第一次定位时的位置信息,第一个为成功时的回掉函数,还有error时的回掉,第三个是传状态的。
在请求成功函数中有以下属性

经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)
在请求失败函数中有4种情况(err.code状态值):

1为用户拒绝定位请问
2暂时获取不到位置信息
3为请求超时
4未知错误
第三个options是可选参数,属性如下:

enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。
maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。

static watchPosition(success,error?,options?)

是多次改变了位置信息时才会触发,一般触发的可能性可能用户多次刷新数据,如一个人行车到其他城市,这时如果设置一个监听函数,只要watchid不一样,就会不断的触发

由于可能会出现缓存的情况,所以Geolocation 为我们提供了一个可以清除缓存的方法watchPosition(),改方法是 用于上一次的定位信息进行清除的。

对了,要启动react native 的定位功能的话,如果你是android 用户,你需要先在AndroidManifest.xml中加入以下权限

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

示例:

_getPosition(){
     navigator.geolocation.getCurrentPosition(
      (position) => {
        var initialPosition = JSON.stringify(position);
        this.setState({initialPosition});
        alert(initialPosition);
      },(error) => alert(JSON.stringify(error)),{enableHighAccuracy: true,timeout: 20000,maximumAge: 1000}
    );
    watchID = navigator.geolocation.watchPosition((position) => { var lastPosition = JSON.stringify(position); this.setState({lastPosition}); }); }

这里注意的是navigator.geolocation中的navigator不是react native 中导航器的navigtor,这里navigator.geolocation整体作为一个对象

原文链接:https://www.f2er.com/react/305105.html

猜你在找的React相关文章