(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 />`。 ## 默认显示 直接运行上面代码后的小菊花样式如下:  ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13ef89819.jpg) 可以看到颜色为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" /> ~~~ 实际效果图: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13ef9f8b8.jpg) 我们的小菊花居然不见了,我们不是只让其不动么?出现这个情况的原因是`hidesWhenStopped`这个属性是`true`,当小菊花不转动的时候,这个属性设置为`true`的话,小菊花就隐藏了。所以为了让其显示且不动,我们设置为`false`: ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="small" color="gray" /> ~~~ ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13efb27de.jpg) ## 修改size 将size设置为`large`: ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="large" color="gray" /> ~~~ ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13efc65c9.jpg) ## 修改color 将小菊花的颜色设置为红色: ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="large" color="red" /> ~~~ ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13efdc8d2.jpg) 我们也可以通过RGB的值来设置颜色: ~~~ <ActivityIndicatorIOS animating = {false} hidesWhenStopped = {false} size="large" color="#00aa00" /> ~~~ ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13f002d3a.jpg)
';