帮助改进此文档

ActivityIndicator

本文档贡献者：sunnylqm(100.00%)

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

示例

• 函数组件示例
• Class组件示例

import React from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";

const App = () => {
  return (
    <View style={[styles.container, styles.horizontal]}>
      <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"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10
  }
});

export default App;

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

class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <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"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10
  }
});

export default App;

文档

Props

继承了所有View Props.

animating

是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。

类型	必填
bool	否

---

color

滚轮的前景颜色（iOS 上默认为灰色，安卓上默认为深绿色）。

类型	必填
color	否

---

size

指示器的大小，默认为'small'。目前只能在 Android 上设定具体的数值。

类型	必填
enum('small', 'large'), number	否

---

hidesWhenStopped

在animating为 false 的时候，是否要隐藏指示器（默认为 true）。如果animating和hidesWhenStopped都为 false，则显示一个静止的指示器。

类型	必填	平台
bool	否	iOS