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