（友情提示：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);