在 React Native 中获取数据之前如何呈现加载程序

Question

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

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

}

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

Answer 2

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

一种解决方案是将加载器包装在模态框内。

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;

之后你可以在你的组件中的任何地方使用它，在加载器完成之前用户将无法执行任何操作（根据标志隐藏）

在 React Native 中获取数据之前如何呈现加载程序

How to render a loader until data is fetched in React Native

javascript

jsx

android-asynctask

react-native