结合上几篇博文,今天学习下，如果来优化一下我们的状态指示器。前面几篇文章，在renderLoadingView方法中，直接使用了一个View，然后加了一个简单的字符串进行提示，看起来还是简陋的很。修改之后，这个方法的代码如下：renderLoadingView:function(){
return (
);
},这个LoadingView方法，是根据官方教程进行改写的，其中有个小提示，里面用到了react-timer-mixin这个库，还是提交安装比较好，不然后面还要安装之后再重新启动。重要的问题就上面这些了，下面把LoadingView整个代码贴到下面:'use strict';
var React = require('react-native');
var {
ActivityIndicatorIOS,
StyleSheet,
View
} = React;
var TimerMixin = require('react-timer-mixin');
var LoadingView = React.createClass({
mixins:[TimerMixin],
getInitialState:function(){
return {
animating:true
}
},
setToggleTimeout:function(){
this.setTimeout(
() => {
this.setState({animating:!this.state.animating});
this.setToggleTimeout();
},
1200
);
},
componentDidMount:function(){
this.setToggleTimeout();
},
render:function(){
return (
);
}
});
var styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
marginTop:65
}
});
module.exports = LoadingView;好了，样式啥的我都调整好了，你就贴进去，在根据自己的需求修改下吧。