React Native 弹窗（三）自定义（使用Modal实现）

针对弹窗之前已讨论过两种

1、系统的Alert、

2、Ant Design React Native库中的Modal.alert

但这两种都各有自己的局限性，所以现在我么就使用用Modal来自定义实现弹窗

一、Modal

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity），用它可以实现遮罩的效果。

Modal提供的属性有：

animationType（动画类型） PropTypes.oneOf([‘none’, ‘slide’, ‘fade’]

• none：没有动画
• slide：从底部滑入
• fade：淡入视野

onRequestClose（被销毁时会调用此函数）

• 在 ‘Android’ 平台，必需调用此函数（文档上这样讲，不调用也可以，该属性主要是监听安卓返回键）
• 详解：React Native Modal的onRequestClose属性详解

onShow（模态显示的时候被调用）

transparent (透明度) bool

• 为true时，使用透明背景渲染模态。

visible（可见性） bool

onOrientationChange（方向改变时调用）

• 在模态方向变化时调用，提供的方向只是 ” 或 ”。在初始化渲染的时候也会调用，但是不考虑当前方向。

supportedOrientations（允许模态旋转到任何指定取向）[‘portrait’, ‘portrait-upside-down’, ‘landscape’，’landscape-left’，’landscape-right’]）

• 在iOS上，模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。

export interface ModalBaseProps {
    // Only `animated` is documented. The JS code says `animated` is
    // deprecated and `animationType` is preferred.
    animated?: boolean;
    /**
     * The `animationType` prop controls how the modal animates.
     *
     * - `slide` slides in from the bottom
     * - `fade` fades into view
     * - `none` appears without an animation
     */
    animationType?: "none" | "slide" | "fade";
    /**
     * The `transparent` prop determines whether your modal will fill the entire view.
     * Setting this to `true` will render the modal over a transparent background.
     */
    transparent?: boolean;
    /**
     * The `visible` prop determines whether your modal is visible.
     */
    visible?: boolean;
    /**
     * The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed.
     * _On the Android platform, this is a required function._
     */
    onRequestClose?: () => void;
    /**
     * The `onShow` prop allows passing a function that will be called once the modal has been shown.
     */
    onShow?: (event: NativeSyntheticEvent<any>) => void;
}

 

二、项目实际使用

效果图：

 

 代码：

ValueSingleAlertModal弹窗组件

import React, { Component } from "react";
import { Modal, Text, View, TouchableOpacity, StyleSheet, } from "react-native";
import { IBasePageProp, IBaseRenderItem } from '../../../../utils/face/base'
import { DeviceHelp } from "../../../../utils/define/helper";

export interface IProps extends IBasePageProp {
    title: string,
    message: string,
    btntiltle: string,
}
// 弹出菜单组件
export default class ValueSingleAlertModal extends React.Component<IProps> {


    state = {
        modalVisible: false,
    };

    setModalVisible(visible: any) {
        this.setState({ modalVisible: visible });
    }

    render() {
        return (
            <Modal
                animationType="slide"
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                    this.setModalVisible(false)
                }}
            >
                <View style={{
                    flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <View style={style.bg}>
                        {/* 标题 */}
                        <Text style={style.toptext}>{this.props.title}</Text>
                        {/* 内容 */}
                        <Text style={style.centerText}>{this.props.message}</Text>
                        {/* 分割线 */}
                        <View style={style.line}></View>
                        {/* 取消按钮 */}
                        <TouchableOpacity onPress={() => {
                            this.setModalVisible(false);
                        }}>
                            <Text style={style.btnText}>{this.props.btntiltle}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        );
    }

}

const style = StyleSheet.create({

    bg: {
        backgroundColor: '#FFFFFF',
        borderRadius: 10,
        width: DeviceHelp.screenW - 100,
    },

    toptext: {
        fontWeight: 'bold',
        color: '#333333',
        marginTop: 20,
        textAlign: 'center',
        fontSize: DeviceHelp.fontSize(17)
    },

    centerText: {
        color: '#333333',
        textAlign: 'center',
        paddingTop: 15,
        paddingLeft: 15,
        paddingRight: 15,
        fontSize: DeviceHelp.fontSize(15)
    },

    line: {
        marginTop: 20,
        backgroundColor: '#99999955',
        height: 1,
    },

    btnText: {
        marginTop: 15,
        marginBottom: 15,
        color: "#3498FE",
        fontWeight: "bold",
        textAlign: "center",
        fontSize: DeviceHelp.fontSize(18),
    },


})

 

使用：

1、引用文件

import ValueSingleAlertModal from '../valuedataview/cptvaluesiglealert'

2、声明singleAlert

export default class extends UtilsRootPage<IBasePageProp, valueDataStates> {
    // 成员变量
    private singleAlert!: ValueSingleAlertModal;

3、render方法中渲染

<ValueSingleAlertModal
                    ref={(c) => {
                        if (c != null) {
                            this.singleAlert = c;
                        }
                    }}
                    title='我是标题'
                    message='我是内容我是内容我是内容'
                    btntiltle='知道了'
                />

4、调用弹窗

this.singleAlert.setModalVisible(true)

备注：

官方文档：https://docs.nativebase.io/modal

Ant Design React Native的Modal对话框：https://rn.mobile.ant.design/components/modal-cn/

参考资料：https://blog.csdn.net/qianzhihe1992110/article/details/77291407