1.VibrationIOS
vibrate() :振动提醒一秒,需要真机测试。
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Text,
VibrationIOS
} = React;
var app = React.createClass({
render:function(){
return(
<View>
<Text onPress={this.vibration}
style={styles.btn}>
振动一下
</Text>
</View>
);
},
vibration:function(){
VibrationIOS.vibrate();
}
});
var styles = StyleSheet.create({
btn:{
marginTop:50,
marginLeft:10,
marginRight:10,
height:35,
backgroundColor:'#3bc1ff',
color:'#fff',
lineHeight:24,
fontWeight:'bold',
textAlign:'center'
}
});
AppRegistry.registerComponent('RNOldVersionES5', () => app);
2.Geolocation 位置服务
2.1.getCurrentPosition(successCallback, errorCallback, GeoOptions):用于获取当前位置。
GeoOptions 是传递的参数,包括:timeout 指定获取地理位置信息时的超时时常,单位为毫秒。
maximumAge 重复获取定时时指定多久再次获取,毫秒。
enableHighAccuracy 值为true或者false,指定是否要求高精度的位置信息。
2.2.watchPosition(successCallback, errorCallback, GeoOptions):监测位置运动。
2.3.clearWatch(watchID):依据ID清除监测.
var Geolocation = require('Geolocation');
var app = React.createClass({
render:function(){
return(
<View>
<Text onPress={this.vibration}
style={styles.btn}>
获取位置
</Text>
</View>
);
},
vibration:function(){
// VibrationIOS.vibrate();
Geolocation.getCurrentPosition(function(data){
alert(JSON.stringify(data));
},
function(){
alert('获取位置失败');
});
}
});
3.数据请求
1.XMLHttpRequest
2.Fetch
借用官方的一句话:
作为开发者来说,你通常不应该直接使用XMLHttpRequest,因为它的API用起来非常冗长。不过这一API的实现完全兼容浏览器,因而你可以使用很多npm上已有的第三方库,例如frisbee或是axios。(不过我们还是推荐你使用fetch)
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var App = React.createClass({
render: function(){
return(
<View>
<Text onPress={this._doXMLHttpRequest} style=
{styles.btn}>XMLHttpRequest请求数据</Text>
<Text onPress={this._doFetch} style={styles.btn}>Fetch请求数据</Text>
</View>
);
},
_doXMLHttpRequest: function(){
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'http://www.baidu.com/');
request.send();
},
_doFetch: function(){
fetch('http://www.baidu.com/')
.then(function(data){
return data.text();
})
.then((responseText) => {
console.log(responseText);
})
.catch((error) => {
console.warn(error);
});
}
});
var styles = StyleSheet.create({
btn:{
marginTop:50,
marginLeft:10,
marginRight:10,
height:35,
backgroundColor:'#3BC1FF',
color:'#fff',
lineHeight:24,
fontWeight:'bold',
textAlign:'center'
}
});
AppRegistry.registerComponent('RNOldVersionES5', () => App);
4.定时器
1.setTimeout: 主要用于设定一个定时任务,比如打开App5秒后开始获取用户的位置信息。
2.setInterval: 主要用于设定循环执行的任务,例如轮播图。
3.setImmediate: 主要用于设置立即执行的任务。
var Geolocation = require('Geolocation');
//5秒后获取用户位置
var timeoutID = setTimeout(function () {
var geo = require('Geolocation');
geo.getCurrentPosition(function(data){
alert(JSON.stringify(data));
},function(e){
alert(JSON.stringify(e));
});
if(timeoutID){
clearTimeout(timeoutID);
}
}, 5000);
//每隔5秒请求百度数据
var intervalID = setInterval(function () {
fetch('http://www.baidu.com/')
.then(function(data){
return data.text();
})
.then((responseText) => {
console.log(responseText);
})
.catch((error) => {
console.warn(error);
});
}, 5000);
//立即执行‘发送数据’
var immediateID = setImmediate(function(){
console.log('发送数据');
});
5.使用requestAnimationFrame开发进度条
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var TimerMixin = require('react-timer-mixin');
var App = React.createClass({
mixins:[TimerMixin],
getInitialState:function(){
return{
width:10
};
},
render: function(){
var css = [];
css.push(styles.progress);
if(this.state.width){
css.push({width:this.state.width, marginTop:50});
}
return(
<View>
<View style={css}>
</View>
</View>
);
},
componentDidMount:function(){
var _that = this;
function doAnimated(){
_that.setState({
width:_that.state.width + 1
});
if(_that.state.width < 290){
requestAnimationFrame(doAnimated);
}
}
requestAnimationFrame(doAnimated);
}
});
var styles = StyleSheet.create({
progress:{
height:10,
width:10,
marginLeft:10,
backgroundColor:'#e72d00',
marginTop:10
},
});
AppRegistry.registerComponent('RNOldVersionES5', () => App);