react-native-popup-dialog实现通用加载层-蒲公英云

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

迷南。 2022-03-25 10:07 249阅读 0赞

2019-01-20

加载层组件效果如图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70

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