React Native - 使用Geolocation进行定位(获取当前位置、监听位置变化)

1,getCurrentPosition()方法介绍

static getCurrentPosition(geo_success, geo_error?, geo_options?

该方法用于获取当前的位置,其参数如下:

(1)geo_success:成功回调函数
(2)geo_error:失败回调函数
(3)geo_options:传递的参数。其支持的属性有:
  • timeout:指定获取地理位置的超时时间,默认不限时。单位为毫秒。
  • maximumAge:最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为 0,表示浏览器需要立刻重新计算位置。
  • enableHighAccuracy:指示浏览器获取高精度的位置,默认为 false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。

    样例代码,直接可以使用

    import React from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View
    } from 'react-native'; var Geolocation = require('Geolocation'); //默认应用的容器组件
    export default class Localtion extends React.Component { static navigationOptions = ({ navigation }) => {
    const { navigate } = navigation;
    return {
    title: '获取定位'
    };
    }; //渲染
    render() {
    return (
    <View style={styles.container}>
    <Text style={styles.item} onPress={this.getLocation.bind(this)}>获取位置</Text>
    </View>
    );
    } //获取位置
    getLocation() {
    Geolocation.getCurrentPosition(
    location => {
    var result = "速度:" + location.coords.speed +
    "\n经度:" + location.coords.longitude +
    "\n纬度:" + location.coords.latitude +
    "\n准确度:" + location.coords.accuracy +
    "\n行进方向:" + location.coords.heading +
    "\n海拔:" + location.coords.altitude +
    "\n海拔准确度:" + location.coords.altitudeAccuracy +
    "\n时间戳:" + location.timestamp;
    alert(result);
    },
    error => {
    alert("获取位置失败:"+ error)
    }
    );
    }
    } //样式定义
    const styles = StyleSheet.create({
    container:{
    flex: ,
    marginTop:
    },
    item:{
    margin:,
    height:,
    borderWidth:,
    padding:,
    borderColor:'#ddd',
    textAlign:'center'
    },
    });

    二、监视定位变化

    1,watchPosition()方法介绍

    如果我们需要设定一个回调函数来不断响应定位数据发生的变更(设备发生了移动,或获取到了更高精度的地理位置信息)。可以通过 watchPosition() 函数实现该功能。
    watchPosition() 与 getCurrentPosition() 接收的参数相同,但回调函数会被调用多次。
    我们可以直接调用 watchPosition() 函数,不需要先调用 getCurrentPosition() 函数。
     

    2,clearWatch()方法介绍

    根据传入的 watchid 来对应的位置监听活动。

    样例代码

  • import React, { Component } from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View
    } from 'react-native'; var Geolocation = require('Geolocation'); //监听定位的id
    var watchID = null //默认应用的容器组件
    class App extends Component {
    //渲染
    render() {
    return (
    <View style={styles.container}>
    <Text style={styles.item} onPress={this.beginWatch.bind(this)}>开始监听</Text>
    <Text style={styles.item} onPress={this.stopWatch.bind(this)}>停止监听</Text>
    </View>
    );
    } //开始监听位置变化
    beginWatch() {
    watchID = Geolocation.watchPosition(
    location => {
    var result = "速度:" + location.coords.speed +
    "\n经度:" + location.coords.longitude +
    "\n纬度:" + location.coords.latitude +
    "\n准确度:" + location.coords.accuracy +
    "\n行进方向:" + location.coords.heading +
    "\n海拔:" + location.coords.altitude +
    "\n海拔准确度:" + location.coords.altitudeAccuracy +
    "\n时间戳:" + location.timestamp;
    alert(result);
    },
    error => {
    alert("获取位置失败:"+ error)
    }
    );
    } //停止监听位置变化
    stopWatch() {
    Geolocation.clearWatch(watchID);
    }
    } //样式定义
    const styles = StyleSheet.create({
    container:{
    flex: ,
    marginTop:
    },
    item:{
    margin:,
    height:,
    borderWidth:,
    padding:,
    borderColor:'#ddd',
    textAlign:'center'
    },
    }); AppRegistry.registerComponent('ReactDemo', () => App);
上一篇:Linux实时查看日志,访问前10IP 和相关命令


下一篇:.NET 学习书籍推荐