(5)-小菊花控件
最后更新于：2022-04-01 06:49:56
> [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"
/>
~~~
