React UI设计黑色蒙层#000000 80%,首次打开弹出，点击图片可以关闭

import { MainProps } from "@src/component/MaskPannel";
import React, { useState } from "react";
import { StyleSheet, View, TouchableOpacity, Image, Text } from 'react-native';

import { UI } from 'xxxxxx'; // 可以自定义Icon图库
const { Icon } = UI;

const MaskPannel: React.FC<MainProps> = (props: MainProps) => {
    const [visible, setVisible] = useState(true);

    const handleClose = () => {
        setVisible(false);
    };

    const handleMinimize = () => {
        // 处理最小化逻辑
    };

    const handleHelp = () => {
        // 处理帮助逻辑
    };

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerText}>黑色蒙层和覆盖透明图片</Text>
                <View style={styles.iconContainer}>
                    <TouchableOpacity onPress={handleHelp} style={styles.iconButton}>
                        <Icon type='question-circle-o' size={18} tintColor='rgba(255, 255, 255, 0.7)' />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={handleMinimize} style={styles.iconButton}>
                        <Icon type='minus' size={18} tintColor='rgba(255, 255, 255, 0.7)' />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={handleClose} style={styles.iconButton}>
                        <Icon type='times' size={18} tintColor='rgba(255, 255, 255, 0.7)' />
                    </TouchableOpacity>
                </View>
            </View>
            <View style={styles.wrap}>
                {visible && (
                    <View style={styles.overlayContainer}>
                        <TouchableOpacity style={styles.overlay} onPress={handleClose}>
                            <Image source={require('@src/assets/test/bk.png')} style={styles.overlayImage} />
                        </TouchableOpacity>
                    </View>
                )}

                <View style={styles.effectsRow}>
                    <TouchableOpacity style={styles.effectContainer}>
                        <Image source={require('@src/assets/test/pika1.gif')} style={styles.effectImage} />
                        <Text style={styles.effectText}>城堡</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.effectContainer}>
                        <Image source={require('@src/assets/test/pika2.gif')} style={styles.effectImage} />
                        <Text style={styles.effectText}>发射爱心</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.effectContainer}>
                        <Image source={require('@src/assets/test/pika3.gif')} style={styles.effectImage} />
                        <Text style={styles.effectText}>创世纪摩托车</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        borderTopLeftRadius: 12,
        borderTopRightRadius: 12,
        overflow: 'hidden',
        height: 576
    },
    wrap: {
        // flex: 1,
        backgroundColor: '#2E3137',
        paddingTop: 10,
        paddingHorizontal: 20,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 10,
        paddingVertical: 5,
        backgroundColor: '#25272C',
        height: 40,
    },
    headerText: {
        color: '#FFFFFF',
        fontSize: 14,
        fontWeight: '400',
        fontFamily: 'Microsoft YaHei',
        lineHeight: 16,
    },
    iconContainer: {
        width: 98,
        height: 18,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    iconButton: {
        width: 18,
        height: 18,
        justifyContent: 'center',
        alignItems: 'center',
    },
    overlayContainer: {
        ...StyleSheet.absoluteFillObject,
        zIndex: 2,
    },
    overlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
    },
    overlayImage: {
        width: 375,
        height: 536,
    },
    effectsRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 20,
    },
    effectContainer: {
        alignItems: 'center',
        width: 100,
        backgroundColor: '#2E3137',
        padding: 10,
        borderRadius: 10,
    },
    effectImage: {
        width: 50,
        height: 50,
        marginBottom: 8,
    },
    effectText: {
        fontFamily: 'Microsoft YaHei',
        color: '#FFFFFF',
        fontSize: 12,
    },
});

export default MaskPannel;

1.黑色蒙层#000000 80%,首次打开弹出

2.点击图片可以关闭