前言
今天主要介绍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>
);
}
}
运行效果如下: