react native 加载中Loading

因为数据还未加载成功时，为了不让用户看到正在加载时的乱七八糟的页面，所在在页面数据未加载完时，在外面罩一层Loading。

实现图例：

图片.png

实现方法：
React Native 有一个 ProgressBarAndroid组件，封装了 Android 的 ProgressBar，我们可以直接用这个。

我将 Loading 直接封装成了一个组件，然后就可以在需要的时候调用。

Loading 组件：

import React, { Component } from 'react';
import {
    View,
    Text,
    ProgressBarAndroid,
    Modal,
} from 'react-native';

import styles from './styles';

export default class Loading extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {

        return(
            <Modal
                transparent = {true}
                onRequestClose={()=> this.onRequestClose()}
            >
                <View style={styles.loadingBox}>
                    <ProgressBarAndroid styleAttr='Inverse' color='#FF4500' />
                </View>
            </Modal>
        );
    }

}

样式文件 styles.js

'use strict';
import { StyleSheet } from "react-native";
module.exports = StyleSheet.create({
    loadingBox: { // Loading居中
        flex:1,
        alignItems:'center’, 
        justifyContent:'center',
        backgroundColor:'rgba(0, 0, 0, 0.5)’, // 半透明
    }
});

这就已经实现了一个Loading界面了，接下来在需要用的地方引入就可以了。
首页使用：
首先需要先将该组件导入进来，然后用 state 状态来控制它的显示和隐藏。

图片.png

进入首页时，开始加载数据，当数据未加载完成时，Loading状态，当数据加载完成后，Loading隐藏。