显示一个圆形的 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. 效果图
【Kevin Learn React Native】--＞ ActivityIndicator_ide