> [ActivityIndicatorIOS](http://facebook.github.io/react-native/docs/activityindicatorios.html#content) ## ActivityIndicatorIOS 小菊花控件，動態指示圖標，一般在比較耗時的操作中使用，用來做用戶友好性提示。 ## 屬性 | 名稱 | 類型 | 意義 | 默認 | | --- | --- | --- | --- | | color | String | 小菊花的顏色 | gray | | hidesWhenStopped | bool | 停止轉動時是否隱藏 | true | | animating | bool | 是否顯示動畫效果 | true | | size | enum | 大小(‘small’/’large’) | small | ## 函數 * onLayout:布局發生改變時調用 ## 實例 源碼如下，我們會通過更改render函數中ActivityIndicatorIOS控件的屬性，來一步一步了解小菊花。 ~~~ 'use strict'; var React = require('react-native'); var { ActivityIndicatorIOS, AppRegistry, StyleSheet, View, } = React; var helloworld = React.createClass({ render: function() { return ( <ActivityIndicatorIOS /> ); } }); var styles = StyleSheet.create({ }); AppRegistry.registerComponent('hellowrold',() => helloworld); ~~~ 以上代碼我們重點關注`<ActivityIndicatorIOS />`。 ## 默認顯示 直接運行上面代碼后的小菊花樣式如下：?  可以看到顏色為Gray，大小為`small`，默認轉動。所以上面的`<ActivityIndicatorIOS />`?相當于 ~~~ <ActivityIndicatorIOS animating = {true} hidesWhenStopped = {true} size="small" color="gray" /> ~~~ ## 修改animating 我們現在想讓其默認不轉動，我們是不是可以通過將`animating`設置為`false`就可以了(這個地方要注意`hidesWhenStopped`),好，我們來看實際效果，首先修改源碼： ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {true} size="small" color="gray" /> ~~~ 實際效果圖：  我們的小菊花居然不見了，我們不是只讓其不動么？出現這個情況的原因是`hidesWhenStopped`這個屬性是`true`,當小菊花不轉動的時候，這個屬性設置為`true`的話，小菊花就隱藏了。所以為了讓其顯示且不動，我們設置為`false`: ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="small" color="gray" /> ~~~  ## 修改size 將size設置為`large`: ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="large" color="gray" /> ~~~  ## 修改color 將小菊花的顏色設置為紅色： ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="large" color="red" /> ~~~  我們也可以通過RGB的值來設置顏色： ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="large" color="#00aa00" /> ~~~