前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基础篇章:关于 React Native之 ActivityIndicator 组件的讲解

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

作者头像
非著名程序员
发布2018-02-09 15:13:13
6470
发布2018-02-09 15:13:13
举报

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)

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

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

属性

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

实例展示

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

实例代码如下:

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

export default class ActivityIndicatorDemo extends Component {
  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);
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2016-11-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 非著名程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 属性
  • 实例展示
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档