react native之手机定位--Geolocation

权限配置:

iOS

你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段来启用定位功能。如果你使用react-native init创建项目，定位会被默认启用。

https://my.oschina.net/u/3112095/blog/1553218 //具体如何配置ios访问权限看我开源中国

Android

要请求访问地理位置的权限，你需要在AndroidManifest.xml文件中加入如下一行：

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

方法

staticrequestAuthorization()

Request suitable Location permission based on the key configured on pList. If NSLocationAlwaysUsageDescription is set,it will request Always authorization,although if NSLocationWhenInUseUsageDescription is set,it will request InUse authorization.

static getCurrentPosition(geo_success: Function,geo_error?: Function,geo_options?: GeoOptions)

成功时会调用geo_success回调，参数中包含最新的位置信息。支持的选项：timeout (ms),maximumAge (ms),enableHighAccuracy (bool)

static watchPosition(success: Function,error?: Function,options?: GeoOptions)

持续监听位置，每当位置变化之后都调用success回调。支持的选项：timeout (ms),enableHighAccuracy (bool),useSignificantChanges (bool)

static clearWatch(watchID: number)

static stopObserving()

/**
 *
 *
 *  这是手机定位示例
 *
 *
 *
 */

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Text,View,} from 'react-native';



class GeoLocationDemo extends Component {
  constructor(props){
        super(props)
      this.state={
          initialPosition:"",lastPosition:""
      }
  }
  render() {
    return (
             <View>
                 <Text  style={{marginTop:100}}>初始地理位置:</Text>
                 <Text>{this.state.initialPosition}</Text>

                 <Text style={{marginTop:100}}>持续监听地理位置:{this.state.lastPosition}</Text>
             </View>
    );
  }
  componentDidMount(){
      navigator.geolocation.getCurrentPosition(
          (position) => {
              var initialPosition = JSON.stringify(position);
              this.setState({initialPosition});
          },(error) => alert(error.message),{enableHighAccuracy: true}//这个是精准度
      );
      this.watchID = navigator.geolocation.watchPosition((position) => {
          var lastPosition = JSON.stringify(position);
          this.setState({lastPosition});
      });
    }
    componentwillUnmount() {
      navigator.geolocation.clearWatch(this.watchID);//组件被移除的到时候一定要清理
  }

}

const styles = StyleSheet.create({
    wrapper: {

    }

});

module.exports=GeoLocationDemo