(5)-小菊花控件

ActivityIndicatorIOS

ActivityIndicatorIOS

小菊花控件，动态指示图标，一般在比较耗时的操作中使用，用来做用户友好性提示。

属性

函数

• 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"
        />