Javascript 如何在使用Redux从Firebase获取数据之前显示活动指示器

我使用FireBase作为数据库，使用Redux在react本机应用程序中获取数据。在获取数据之前，我想显示一个活动指示器。 这是我的代码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本机代码，其中将显示数据：

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>
      );
  }
}

import React，{Component}来自“React”；
进口{
样式表，
看法
文本，
滚动视图，
活动指示器，
可触摸且无反馈，
形象
}从“反应本族语”；
从“react redux”导入{connect}；
从“./store/actions/home\u actions”导入{getHome}；
从“/rn sound/demo”导入演示屏幕；
类主屏幕扩展组件{
componentDidMount（）{
this.props.dispatch（getHome（））；
}
renderArticle=imgs=>
imgs.文章
？imgs.articles.map（（项目，i）=>(
this.props.navigation.navigate（`${item.navigate}`）}
key={i}
>
{item.name}
{item.tagline}
))
：null；
render（）{
返回(
{this.renderArticle（this.props.Home）}
);
}
}

---

如何显示Activity Indiator，直到从firebase获取我的数据为止

您可以在状态中使用加载变量。您已将false设置为before fetch命令，然后将其设置为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>
      );
  }

构造函数（道具）{
超级（道具）；
此.state={
加载：错误
};
}
componentDidMount=（）=>{
这是我的国家({
加载：正确
})
this.props.dispatch（getHome（））。然后（response=>{
这是我的国家({
加载：错误
})
})
}
render（）{
返回(
{this.state.loading==false(
{this.renderArticle（this.props.Home）}
) : (
)}
);
}