> [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" /> ~~~