ReactNative

React Native 其他组件之 ActivityIndic

2019-03-19  本文已影响0人  Kevin_小飞象

显示一个圆形的 loading 提示符号。

属性

名称 类型 说明
animating bool 是否要显示指示器动画,默认为 true 表示显示,false 则隐藏。
color color 滚轮的前景颜色(默认为灰色)。
size enum('small', 'large'), number 指示器的大小,默认为'small'。
hidesWhenStopped bool 在animating为 false 的时候,是否要隐藏指示器(默认为 true)。

实例

1. 逻辑代码

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

export default class App extends Component { 
  render() {
    return (
        <View style={styles.container}>
      <ActivityIndicator size="large" color="#0000ff" />
      <ActivityIndicator size="small" color="#00ff00" />
      <ActivityIndicator size="large" color="#0000ff" />
      <ActivityIndicator size="small" color="#00ff00" />   
        </View>
    )
  }
}

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

2. 效果图

activityindicator.jpg
上一篇下一篇

猜你喜欢

热点阅读