react native学习笔记21——常用API（3）Geolocation定位、Keyboard键盘

前言

今天主要介绍React Native中获取定位的api——Geolocation,及控制软键盘相关事件的api——Keyboard这两个模块。

Geolocation

React Native 提供自带的定位api——Geolocation获取定位信息及监听位置变化。该定位API遵循web标准。

Geolocation方法

1 static getCurrentPosition(geo_success: Function, geo_error?: Function, geo_options?: GeoOptions)
获取当前的位置，其参数如下：

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

2 static watchPosition(success: Function, error?: Function, options?: GeoOptions)
持续监听位置，其参数同getCurrentPosition。

3 static clearWatch(watchID: number)
停止监听位置，根据传入的 watchid 来清除对应的位置监听活动。

iOS

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

Android

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

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

基本用法

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    } from 'react-native';
var Geolocation = require('Geolocation');
//监听定位的id
var watchID = null
export default class GeolocationDemo extends Component {
    constructor(props){
        super(props);
        this.state = {
            getCurrentPositionResult:null,
            watchPositionResult: null,
        };
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.item} onPress={this.getLocation.bind(this)}>获取位置</Text>
                <Text style={styles.item} onPress={this.beginWatch.bind(this)}>开始监听</Text>
                <Text style={styles.item} onPress={this.stopWatch.bind(this)}>停止监听</Text>
                <Text>{this.state.getCurrentPositionResult}</Text>
                <Text>{this.state.watchPositionResult}</Text>
            </View>
        );
    }


    //获取位置
    getLocation() {
        Geolocation.getCurrentPosition(
            location => {
                let result ="getCurrentPosition:\n"+ "速度：" + 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+
                    "\n";
                this.setState({
                    getCurrentPositionResult:result,
                });
            },
            error => {
                this.setState({
                    getCurrentPositionResult:"获取位置失败："+ error,
                });
            }
        );
    }
    //开始监听位置变化
    beginWatch() {
        watchID = Geolocation.watchPosition(
            location => {
                let result ="watchPosition:\n"+ "速度：" + 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;
                this.setState({
                    watchPositionResult:result,
                });
            },
            error => {
                this.setState({
                    getCurrentPositionResult:"获取位置失败："+ error,
                });
            }
        );
    }
    //停止监听位置变化
    stopWatch() {
        Geolocation.clearWatch(watchID);
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1,
        marginTop:25
    },
    item:{
        margin:10,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
        textAlign:'center'
    },
});

运行效果如下：
（1）点击“获取位置”按钮后调用getCurrentPosition方法，获取设备当前位置。
（2）点击“开始监听”按钮后便开始监视设备的位置变化，每当定位信息发生变化则更新watchPosition信息显示。
（3）点击“停止监听”按钮则停止对设备位置变化的监听。

Keyboard

Keyboard模块可以用来控制键盘的相关事件，通过监听原生键盘事件以做出相应回应，例如弹出键盘、收回键盘。

Keyboard方法

1 static addListener(nativeEvent, jsFunction)
添加监听处理原生键盘通知事件的方法。此方法会返回监听函数的引用。其参数如下：

• nativeEvent:用来指明要监听的事件，具体有以下几种:
  
  • keyboardWillShow
  • keyboardDidShow
  • keyboardWillHide
  • keyboardDidHide
  • keyboardWillChangeFrame
  • keyboardDidChangeFrame
    注意如果你把android:windowSoftInputMode设置为adjustResize，则在Android上只有keyboardDidShow和keyboardDidHide事件有效。
• jsFunction:事件触发时调用的js函数。

2 static removeListener(eventName:string, callback:function)
移除指定的事件监听函数。callback移除成功的回调函数。

3 static removeAllListeners(eventType)
移除某个类型事件的所有监听函数。eventType为要移除的原生事件类型。

4 static dismiss()
收回键盘并取消聚焦。

实例

下面通过实例演示Keyboard的实际使用方法：

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

export default class KeyboardDemo extends Component {
    constructor(props){
        super(props);
        this.state = {
            kbState:null,
        };
    }
    componentWillMount () {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
    }

    componentWillUnmount () {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow () {
        this.setState({
            kbState:"Keyboard Shown",
        });
    }

    _keyboardDidHide () {
        this.setState({
            kbState:"Keyboard Hidden",
        });
    }

    render() {
        return (
            <View>
                <TextInput
                    onSubmitEditing={Keyboard.dismiss}
                />
                <Text>{this.state.kbState}</Text>
            </View>
        );
    }
}

运行效果如下：