react-native-popup-dialog实现通用加载层

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33721382/article/details/86559814

2019-01-20

加载层组件效果如图：

react-native-popup-dialog是一个很不错的对话框库，我借用它的遮盖层实现了加载层效果。

地址：https://github.com/jacklam718/react-native-popup-dialog/blob/master/README.md

使用demo代码:

import React from 'react';
import {
    Button,
    View,
} from 'react-native';


import {
    LoadingDialog
} from './../../utils/LoadingDialogUtils';

/**
 * dialog-component分支
 */
export default class TestLoadingDialogUtilsExample extends React.Component {

    static navigationOptions = {
        headerTitle: '测试加载对话框工具类',
    };

    constructor(props) {
        super(props);
        this.state = {
            defaultAnimationDialog: false,

            loadingDialogVisible: false,    //是否显示加载层
            loadingHintText: null,          //加载层提示语
        }
    }

    /**
     * 打开加载对话框
     * @param loadingHintText 提示文本
     */
    showLoadingDialog = (loadingHintText) => {
        this.setState({
            loadingDialogVisible: true,
            loadingHintText: loadingHintText,
        });
    };

    /**
     * 关闭加载对话框
     */
    closeLoadingDialog = () => {
        this.setState({
            loadingDialogVisible: false,
            loadingHintText: null,
        });
    };

    render() {
        return (
            <View style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
            }}>

                <Button title="打开loadingDialog" onPress={() => {
                    this.showLoadingDialog('加载中...');
                    setTimeout(() => {
                        this.closeLoadingDialog();
                    }, 3000);
                }}/>

                <LoadingDialog
                    loadingDialogVisible={this.state.loadingDialogVisible}
                    loadingHintText={this.state.loadingHintText}
                />


            </View>
        )
    }

}

工具类代码：

import React from 'react';
import {ActivityIndicator, Text, View} from "react-native";
import Dialog from "react-native-popup-dialog";

const GlobalLoadingDialogStyle = {

    //Dialog的宽度：屏幕的百分比
    loadingDialogWidthPercent: 0.35,
    //Dialog的高度
    loadingDialogHeightPercent: 0.15,

    //设置遮盖层的背景色
    overlayBackgroundColor: '#00000000',
    //Dialog样式
    dialogStyle: {
        backgroundColor: 'rgba(0,0,0,0.8)',
    },

    //Dialog内容容器的样式
    dialogContentContainerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    //提示文字的样式
    loadingHintTextStyle: {
        fontSize: 16,
        color: '#fff',
        marginTop: 10
    }

};


/**
 * 2018-12-14
 * chenlw
 * work：封装Loading对话框代码
 * @param loadingDialogVisible  对话框是否显示
 * @param loadingHintText  加载提示文本
 * @returns {*}
 * @constructor
 */
function LoadingDialog({loadingDialogVisible, loadingHintText}) {
    return (
        <Dialog
            width={GlobalLoadingDialogStyle.loadingDialogWidthPercent}
            height={GlobalLoadingDialogStyle.loadingDialogHeightPercent}
            visible={loadingDialogVisible}
            rounded
            overlayBackgroundColor={GlobalLoadingDialogStyle.overlayBackgroundColor}
            dialogStyle={GlobalLoadingDialogStyle.dialogStyle}
        >
            <View style={GlobalLoadingDialogStyle.dialogContentContainerStyle}>
                <ActivityIndicator size="large"/>
                <Text
                    style={GlobalLoadingDialogStyle.loadingHintTextStyle}>{loadingHintText}</Text>
            </View>
        </Dialog>
    );
}

export {LoadingDialog};

扫描二维码关注公众号，回复： 5843799 查看本文章