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

Posted 2021-05-02

我通过异步请求获取数据。我知道在显示数据之前我需要等待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>
    );
  }

}

答案

使用ActivityIndicator的一个简单示例 -

进口ActivityIndicator

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

将data状态设置为null

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

另一答案

尽管@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;

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