因為數(shù)據(jù)還未加載成功時，為了不讓用戶看到正在加載時的亂七八糟的頁面，所在在頁面數(shù)據(jù)未加載完時，在外面罩一層Loading。

實現(xiàn)圖例：

圖片.png

實現(xiàn)方法：
React Native 有一個 ProgressBarAndroid組件，封裝了 Android 的 ProgressBar，我們可以直接用這個。

我將 Loading 直接封裝成了一個組件，然后就可以在需要的時候調(diào)用。

Loading 組件：

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

import styles from './styles';

export default class Loading extends Component {
    // 構(gòu)造
    constructor(props) {
        super(props);
        // 初始狀態(tài)
        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)’, // 半透明
    }
});

這就已經(jīng)實現(xiàn)了一個Loading界面了，接下來在需要用的地方引入就可以了。
首頁使用：
首先需要先將該組件導(dǎo)入進來，然后用 state 狀態(tài)來控制它的顯示和隱藏。

圖片.png

進入首頁時，開始加載數(shù)據(jù)，當數(shù)據(jù)未加載完成時，Loading狀態(tài)，當數(shù)據(jù)加載完成后，Loading隱藏。