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

javascript 复制代码
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.点击图片可以关闭

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js