javascript - 如果使用 Redux 从 Firebase 获取数据，如何显示事件指示器

Question

我使用 FireBase 作为数据库，使用 Redux 在 react native 应用程序中获取数据。我想显示事件指示器，直到获取数据。这是我的代码 Redux :

export function getHome() {
  const request = axios({
    method: "GET",
    url: `${FIREBASEURL}/home.json`
  })
    .then(response => {
      const articles = [];
      for (let key in response.data) {
        articles.push({
          ...response.data[key],
          id: key
        });
      }

      return articles;
    })
    .catch(e => {
      return false;
    });

  return {
    type: GET_HOME,
    payload: request
  };
}

这是我的 React Native 代码，其中将显示数据:

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  ActivityIndicator,
  TouchableWithoutFeedback,
  Image
} from "react-native";
import { connect } from "react-redux";
import { getHome } from "../store/actions/home_actions";
import DemoScreen from "./rn-sound/demo";

class HomeScreen extends Component {
  componentDidMount() {
    this.props.dispatch(getHome());
  }
  renderArticle = imgs =>
    imgs.articles
      ? imgs.articles.map((item, i) => (
          <TouchableWithoutFeedback
            onPress={() => this.props.navigation.navigate(`${item.navigate}`)}
            key={i}
          >
            <View>
              <View>
                <Image
                  style={{
                    height: 220,
                    width: "100%",
                    justifyContent: "space-around"
                  }}
                  source={{ uri: `${item.image}` }}
                  resizeMode="cover"
                />
              </View>
              <View>
                <Text >{item.name}</Text>
              </View>
              <View>
                <Text }>{item.tagline}</Text>
              </View>
            </View>
          </TouchableWithoutFeedback>
        ))
      : null;

  render() {
      return (
        <ScrollView}>
          {this.renderArticle(this.props.Home)}
        </ScrollView>
      );
  }
}

如何显示 Activity Indiactor 直到我从 Firebase 获取数据

Answer 1

您可以在状态中使用加载变量。您在 fetch 命令之前将其设置为 false，然后将其设置为 true。您可以看到下面的示例。

constructor(props) {
    super(props);

    this.state = {
      loading: false
    };
  }

componentDidMount = () => {
this.setState({
    loading: true
})
this.props.dispatch(getHome()).then(response=>{
    this.setState({
        loading: false
    })
})
}

render() {
      return (
        <ScrollView}>            
          {this.state.loading == false ? (
          <View>
            {this.renderArticle(this.props.Home)}
          </View>
        ) : (
          <ActivityIndicator size="large" />
        )}
        </ScrollView>
      );
  }