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 是傳遞的參數(shù),包括:timeout 指定獲取地理位置信息時的超時時常碘饼,單位為毫秒熙兔。
maximumAge 重復獲取定時時指定多久再次獲取,毫秒艾恼。
enableHighAccuracy 值為true或者false住涉,指定是否要求高精度的位置信息。
2.2.watchPosition(successCallback, errorCallback, GeoOptions):監(jiān)測位置運動钠绍。
2.3.clearWatch(watchID):依據(jù)ID清除監(jiān)測.
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.數(shù)據(jù)請求
1.XMLHttpRequest
2.Fetch
借用官方的一句話:
作為開發(fā)者來說舆声,你通常不應該直接使用XMLHttpRequest,因為它的API用起來非常冗長柳爽。不過這一API的實現(xiàn)完全兼容瀏覽器媳握,因而你可以使用很多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請求數(shù)據(jù)</Text>
<Text onPress={this._doFetch} style={styles.btn}>Fetch請求數(shù)據(jù)</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: 主要用于設(shè)定一個定時任務蛾找,比如打開App5秒后開始獲取用戶的位置信息。
2.setInterval: 主要用于設(shè)定循環(huán)執(zhí)行的任務赵誓,例如輪播圖打毛。
3.setImmediate: 主要用于設(shè)置立即執(zhí)行的任務。
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秒請求百度數(shù)據(jù)
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);
//立即執(zhí)行‘發(fā)送數(shù)據(jù)’
var immediateID = setImmediate(function(){
console.log('發(fā)送數(shù)據(jù)');
});
5.使用requestAnimationFrame開發(fā)進度條
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);