如何渲染加载器，直到在 React Native 中获取数据答案

【问题标题】：How to render a loader until data is fetched in React Native如何渲染加载器，直到在 React Native 中获取数据
【发布时间】：2017-08-08 09:44:09
【问题描述】：

我正在通过异步请求获取数据。我知道在显示数据之前我需要等待 api 请求完成。不幸的是，我不确定如何创建一个加载器来等待数据加载。我是新来的反应，所以如果我也能在实现它方面获得帮助，那就太棒了！这是我当前的代码：

import React, { Component, PropTypes } from 'react';
import { View, Text, ListView, StyleSheet, TouchableHighlight} from 'react- native';
import Header from '../Components/Header';
import Api from '../Utility/Api';


export default class CalendarPage extends Component {

constructor(props) {
super(props);
}

async componentWillMount() { this.setState(
    {data: await Api.getDates()},

    )
}

  render() {
    return (
      <View style={{flex: 1}}>
        <Header pageName="Calendar" navigator={this.props.navigator}/>
        <View style = {{flex:9}}>
            <View>
              { this.state.data.days[0].items.map((item) => (
                <View>
                  <Text>{item.summary}</Text>
                  <Text>{item.start.dateTime}</Text>
                  <Text>{item.description}</Text>
                </View>
              ))}
            </View>
         </View>
      </View>
    );
  }

}

【问题讨论】：

我认为您可以进行两次返回，因此如果没有状态，则返回加载器，否则返回数据加载器。而且我认为您尚未设置初始状态。

标签： javascript android-asynctask react-native jsx

【解决方案1】：

一个使用ActivityIndicator的简单例子 -

导入ActivityIndicator

import { View, Text, ListView, StyleSheet, TouchableHighlight, ActivityIndicator} from 'react- native';

将data 状态设置为空

  constructor(props) {
    super(props);
    this.state = {
      data: null
    }
  }

进行条件渲染

  render() {
    if (!this.state.data) {
      return (
        <ActivityIndicator
          animating={true}
          style={styles.indicator}
          size="large"
        />
      );
    }

    return (
      <View style={{flex: 1}}>
        <Header pageName="Calendar" navigator={this.props.navigator}/>
        ....
        ....
      </View>
    );
  }
}

指标样式

const styles = StyleSheet.create({
  indicator: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 80
  }
});

【讨论】：

【解决方案2】：

虽然@vinayr 提出的解决方案运行良好，但即使在显示加载程序时用户仍然可以点击屏幕并执行一些操作，这可能会导致崩溃。

一种解决方案是将加载程序包装在 Modal 中。

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  ActivityIndicator,
} from 'react-native';

const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: '#00000040',
  },
  activityIndicatorHolder: {
    backgroundColor: '#FFFFFF',
    height: 100,
    width: 100,
    borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});


const SmartLoader = (props) => {
  const {
    isLoading,
    ...attributes
  } = props;

  return (
    <Modal
      transparent
      animationType={'none'}
      visible={isLoading}
      onRequestClose={() => { console.log('Noop'); }}
    >
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorHolder}>
          <ActivityIndicator
            animating={isLoading}
            size="large"
          />
        </View>
      </View>
    </Modal>
  );
};

export default SmartLoader;

之后您可以在组件的任何位置使用它，用户将无法执行任何操作，直到加载器完成（根据标志隐藏）

【讨论】：

点击按钮时如何显示/隐藏模式？