时间戳

首页 > 解决方案 > react native 组件中的长网络操作

database - react native 组件中的长网络操作

问题描述

我正在尝试从组件中的数据库中获取数据并希望在组件上设置数据。我已经尝试过componentDidMount()和componentWillMount()。但加载数据需要一些时间。我是反应原生的新手，没有任何经验，请正确指导我哪里是最好的表演场所

长时间的网络操作。.

componentWillMount() {
    this.__fetchDataFromDB();
  }

  static navigationOptions = {
    headerTitle: "Firebase"
  };

  __fetchDataFromDB = () => {
    var usersRef = firebase.database().ref("/Users");

    usersRef.on("value", snap => {
      const result = [].concat(...Object.values(snap.val()).map(Object.values));

      this.setState({
        data: result
      });
    });
  };

谢谢

标签： databasereact-nativenetworking

解决方案

你可以这样做

if (this.state.isLoading === true) {
            return (
                <View style={{ flex: 1, justifyContent: 'center' }}>
                   
                    <ActivityIndicator size={ Platform.OS=='android'? 90:'large'} color="#DE0400" />


                </View>
            )
        }

当您的数据提取完成时，setState isLoading 为 false。而且最好在componentDidMount()

推荐阅读