系统的指示器ActivityIndicator在Native中的使用方法.
默认的有四个属性: size, color, animating,hidesWhenStopped;
size: 是个枚举值: large,small 指示器大小,默认是small
在安卓里面的话可以设置大小类型为number的,只适用在安卓里面
color: 指示器圆圈的前景色,默认灰色
animating:是否要显示这个加载指示器,默认true是显示，false隐藏
hidesWhenStopped: ios独有,当没有加载动画的时候是否隐藏,默认是true
效果图：
Snip20161212_6.png
代码：
import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
centering: {
padding: 8
},
textStyle: {
fontSize: 20
}
});
class SLActivityIndicator extends Component {
constructor(props) {
super(props);
this.state = {
animating: true
};
}
componentDidMount() {
this.setToggleTimeout();
}
componentWillUnmount() {
clearTimeout(this.timer);
}
setToggleTimeout() {
this.timer = setTimeout(() => {
this.setState({ animating: !this.state.animating });
this.setToggleTimeout();
}, 2000);
}
render() {
return (
<View style={styles.container}>
<ActivityIndicator
animating={this.state.animating}
// transform: scale 放大比例
style={[styles.centering, { height: 80, transform: [{ scale: 5 }] }]}
size="large"
/>
eg: {
platform: 'android',
title: 'Custom size (size: 75)',
render() {
return (
<ActivityIndicator
style={styles.centering}
size={75}
/>
);
}
},
<Text style={styles.textStyle}>正在加载中...</Text>
</View>
);
}
}
export default SLActivityIndicator;
