剑客
关注科技互联网

基础篇章:关于 React Native之 ActivityIndicator 组件的讲解

今天我们讲解的这个控件的非常简单,那就是ActivityIndicator,它替代了我们之前所说的那个ProgressbarAndroid,功能就是和ProgressbarAndroid一样,显示一个正在加载的状况和进度。

官网上是这么形容我的:显示一个圆形loading提示。我们直接看属性吧。

属性

  • animating bool 是否要显示这个加载指示器,默认true是显示,false隐藏
  • color 指示器圆圈的前景色,默认灰色
  • size [ ‘small’, ‘large’ ] 指示器大小
  • hidesWhenStopped bool ios独有 当没有加载动画的时候是否隐藏

实例展示

由于太简单了,效果图也没什么,直接看吧,如下:

基础篇章:关于 React Native之 ActivityIndicator 组件的讲解

实例代码如下:

importReact, { Component }from'react';
import{
 AppRegistry,
 StyleSheet,
 ActivityIndicator,
 Text,
 View
} from'react-native';

exportdefaultclassActivityIndicatorDemoextendsComponent{
 render() {
return(
 <View style={styles.container}>
 <ActivityIndicator
 size="large"
 color="#0000ff"
 />
 <ActivityIndicator
 style={{marginTop:30}}
 size="small"
 color="#ff00ff"
 />
 </View>
 );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
});

AppRegistry.registerComponent('ActivityIndicatorDemo', () => ActivityIndicatorDemo);
分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址