如何使用 React Native 在屏幕中间显示加载进度或微调器？

Question

我正在开发 React Native 应用程序。

我能够自己解决所有问题，但这是个例外。我将使用底部选项卡导航器加载另一个屏幕。

例如，用户登录应用程序后，它应该显示主屏幕，其中有许多图片和许多样式表效果、图标。因此，在登录确认后（我的意思是在登录确认警报后），几秒钟后主屏幕出现。

所以我想在登录屏幕中显示一些微调器，同时在后台加载主主屏幕，当它准备好显示时，擦除微调器并显示主主屏幕。我怎样才能做到这一点？

我的底部选项卡导航器只是使用createBottomTabNavigator()方法创建的。

Answer 1

所以在你的情况下，你可以做几件事

1. 您可以使用 React Native Activity Indicator -> View
2. 可以使用Overlay Library -> react-native-loading-spinner-overlay ->查看GitHub
3. 如果你喜欢像 facebook / instagram 那样加载 -> 然后使用 react-native-easy-content-loader ->查看 GitHub

假设您正在使用 React Native Activity Indicator ：

import { ActivityIndicator } from "react-native";

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  //Get Home Screen Data API Action
  componentDidMount() {
    this.loadAPI(); // Call home screen get data API function
  }

  //Login API Function
  loadAPI = () => {
    this.setState({ isLoading: true }); // Once You Call the API Action loading will be true
    fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(response => response.json())
      .then(responseText => {
        // You can do anything accroding to your API response
        this.setState({ isLoading: false }); // After getting response make loading to false
      })
      .catch(error => {});
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        {this.state.isLoading && <ActivityIndicator color={"#fff"} />}
      </View>
    );
  }
}

• 如果你想隐藏所有视图直到加载完成像图像一样，那么你可以使用自定义库而不是活动指示器。

Answer 2

我已经创建了我的自定义加载程序组件。使用它，您可以显示内置的 ActivityIndi​​cator 或带有叠加层的自定义 gif 加载器图像。

加载器.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Image,
  ActivityIndicator
} from 'react-native';
import Colors from '../../config/Colors';

class Loader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: this.props.isLoading
    }
  }

  static getDerivedStateFromProps(nextProps) {
    return {
      isLoading: nextProps.isLoading
    };
  }

  render() {
    return (
      <Modal
        transparent={true}
        animationType={'none'}
        visible={this.state.isLoading}
        style={{ zIndex: 1100 }}
        onRequestClose={() => { }}>
        <View style={styles.modalBackground}>
          <View style={styles.activityIndicatorWrapper}>
            <ActivityIndicator animating={this.state.loading} color={Colors.primary} />

            {/* If you want to image set source here */}
            {/* <Image
              source={require('../assets/images/loader.gif')}
              style={{ height: 80, width: 80 }}
              resizeMode="contain"
              resizeMethod="resize"
            /> */}
          </View>
        </View>
      </Modal>
    )
  }
}

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

export default Loader

现在您可以在必须显示加载指示器时使用它，如下所示：

<Loader isLoading={this.state.isLoading} />