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

迷南。 2022-03-25 10:07 168阅读 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][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};

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70]: /images/20220325/ab6a653435f849a38f93325d5153c4c3.png
[https_github.com_jacklam718_react-native-popup-dialog_blob_master_README.md]: https://github.com/jacklam718/react-native-popup-dialog/blob/master/README.md