React Native从零开始（十）ActivityIndicator的使用
ActivityIndicator就是我们常见的Loading提示符号，实现起来也很简单，基本的属性也不多。废话不说先来一张效果图
一、基本属性
animating bool #：是否显示指示器（true、false）默认为true。
color string ：滚轮的前景颜色（默认为灰色）。
size enum('small', 'large') #：这个是上图中效果的实现，small和large分别为20和36的大小。
还有一个是ios的属性因为是Android的开发所以没有尝试，大家可以自己尝试下
hidesWhenStopped bool ：在没有动画的时候，是否要隐藏指示器（默认为true）。
二、实现的代码
1、首先是布局的介绍
render() {
return (
<View style={styles.container}>
<Text style={styles.demoTest}>
点击会显示或隐藏Loading提示符号
</Text>
<ActivityIndicator
animating={this.state.animating}
size={'small'}/>
<ActivityIndicator
animating={this.state.animating}
size={'large'}/>
<Button
onPress={ClickBtn.bind(this)}
title="显示/隐藏"
color="#841584"
/>
</View>
);
} 没有什么好说的就是跟普通的使用是一样的，要先导入再使用。里头的Button是作为点击按钮
2、逻辑
第一步是设置state，需要用到animating，将其设置成true，这个属性在点击按钮的时候进行切换。
constructor(props){
super(props);
/*用来指示是否显示Loading提示符号*/
this.state = {
animating: true,
}
}然后是按钮的逻辑，就是每次点击的时候判断是否为true，用三目运算符就好拉
function ClickBtn() {
this.setState({
animating: this.state.animating ? false : true
});
}三、整体的实现代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ActivityIndicator,
Button
} from 'react-native';
function ClickBtn() {
this.setState({
animating: this.state.animating ? false : true
});
}
export default class ActivityIndicatorDemo extends Component {
constructor(props){
super(props);
/*用来指示是否显示Loading提示符号*/
this.state = {
animating: true,
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.demoTest}>
点击会显示或隐藏Loading提示符号
</Text>
<ActivityIndicator
animating={this.state.animating}
size={'small'}/>
<ActivityIndicator
animating={this.state.animating}
size={'large'}/>
<Button
onPress={ClickBtn.bind(this)}
title="显示/隐藏"
color="#841584"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
demoTest: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('ActivityIndicatorDemo', () => ActivityIndicatorDemo);
作者：SuperBigLw 发表于2017/2/16 11:16:27 原文链接
阅读：7 评论：0 查看评论