使用ActivityIndicator制作一个loading效果

在本课程里，我们将使用ActivityIndicator来制作一个loading效果，就是当app启动的时候，需要从AsyncStorage或者是云端API获取数据，在获取数据这段时间内，我们在app界面上显示一个loading效果，当数据获取成功（或者是失败）之后，这个loading效果自动消失。

导入ActivityIndicator

import {View, Text, StyleSheet, Platform, ListView, Keyboard, AsyncStorage, ActivityIndicator} from "react-native";

制作一个loading效果

我们将使用一个View来包含一个ActivityIndicator配合StyleSheet来实现这个loading效果。

<View style={styles.loading}>
  <ActivityIndicator
    size="large"
    animating
  />
</View>

这个styles.loading实现如下：

loading: {
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  alignItems: "center",
  justifyContent: "center",
  backgroundColor: "rgba(0,0,0,0.2)"
}

效果如下：

自动显示和消失

我们希望在app启动的时候，这个loading效果自动出现，load完成之后自动消失。我们可以使用一个state值来实现这一点。

增加一个state变量loading，初始值为true，表示一开始要出现loading

this.state = {
  loading: true,
  filter: "ALL",
  value: "",
  items: [],
  dataSource: ds.cloneWithRows([])
};

然后我们在load数据完成后将这个state值设置为false

componentWillMount() {
  AsyncStorage.getItem("items").then(json => {
    try {
      const items = JSON.parse(json);
      this.setSource(items, items, {loading: false});
    } catch (e) {
      this.setState({loading: false});
    }
  });
}

最后，我们使用这个state.loading变量来判断是否要显示这个loading View。

{this.state.loading && <View style={styles.loading}>
  <ActivityIndicator
    size="large"
    animating
  />
</View>}

本节代码：https://github.com/zhiwehu/todo/tree/ActivityIndicator