这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示:

React Native中加载指示器组件ActivityIndicator使用方法-LMLPHP

可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置的,这个组件本身就有一个属性是设置其大小的,两个选项,一大一小。这里顺便就介绍一些该组件的属性:

  • animating:这个参数接受布尔型的值,表示是否显示加载指示器。
  • color:string型参数,用来设置指示器的颜色,默认是灰色的,我们一般也不管他。
  • hidesWhenStopped(仅iOS可用):在没有动画的时候,是否要隐藏指示器(默认为true)。
  • size:这就是设置尺寸的,就两个选项,small和large,一小一大。

能设置的就这几个参数,接下来我们看看这个例子。例子中有一个按钮,控制了指示器的显示和隐藏。按钮我们用TouchableOpacity组件来实现,这个组件可以添加一个响应方法,下面我们放一小一大两个指示器,代码如下:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ActivityIndicator,
TouchableOpacity
} from 'react-native'; class RNActivityIndicatorDemo extends Component { constructor(props) {
super(props);
this.state = {// 初始设为显示加载动画
animating: true,
};
} // 按钮响应方法,切换显示与隐藏
showOrHide() {
if (this.state.animating) {
this.setState({
animating: false
});
} else {
this.setState({
animating: true
});
}
} render() {
return (
<View style={styles.container}>
{/* 切换显示或隐藏的按钮 */}
<TouchableOpacity underlayColor="#fff" style={styles.btn} onPress={
this.showOrHide.bind(this)}>
<Text style={{color:'#fff', fontSize: 20}}>显示/隐藏</Text>
</TouchableOpacity>
{/* 小号的指示器 */}
<ActivityIndicator
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="small" />
{/* 大号的指示器 */}
<ActivityIndicator
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="large" />
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
btn:{
marginTop:10,
width:150,
height:35,
backgroundColor:'#3BC1FF',
justifyContent:'center',
alignItems:'center',
borderRadius:4,
},
}); AppRegistry.registerComponent('RNActivityIndicatorDemo', () => RNActivityIndicatorDemo);

看代码,我们首先就在state中加了一个变量animating,用来控制指示器的显示与隐藏,初始是显示的。然后看我们的界面元素部分,即render中的部分,除了最外面一层view外,最上面就是一个TouchableOpacity,onPress属性指向了一个响应方法,即showOrHide方法,在这个方法中我们可以看到,很简单地实现了一个通过animating变量切换显示与隐藏的功能。因此下面的ActivityIndicator元素中我们的animating属性是用state中的animating变量来控制的,其余的属性我们基本是默认的,size一小一大,很简单的例子。

这里可以下载我的示例工程:https://github.com/Cloudox/RNActivityIndicatorDemo 
版权所有:http://blog.csdn.net/cloudox_

引用原文:https://blog.csdn.net/cloudox_/article/details/52440547

写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!

如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!

05-04 01:44