React Native中Modal弹出时如何实现背景模糊效果

方案一：半透明遮罩实现（无额外依赖，兼容性最佳） #

该方案是移动端弹窗的通用实现方式，无需引入第三方依赖，适配全版本iOS/Android设备，修改后的完整代码如下：

import React from 'react'
import { View, StyleSheet, Text, TouchableOpacity, Modal, TouchableWithoutFeedback } from 'react-native'

const ModalContent = ({ visiblity, toggleModal }) => {
    return (
        <Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={toggleModal} >
            {/* 点击背景关闭弹窗 */}
            <TouchableWithoutFeedback onPress={toggleModal}>
                <View style={styles.modalBackground}>
                    <View style={styles.container}>
                        <TouchableOpacity>
                            <Text style={styles.textButton}>Edit</Text>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <Text style={styles.textButton}>Invite</Text>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <Text style={styles.textButton}>Delete</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        </Modal>
    )
}

const styles = StyleSheet.create({
    modalBackground: {
        flex: 1,
        // 半透明黑色遮罩，调整最后一个参数可修改暗度
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end'
    },
    container: {
        backgroundColor: 'white',
        borderTopRightRadius: 25,
        borderTopLeftRadius: 25,
        height: 150,
        justifyContent: 'space-around',
        paddingLeft: 20,
        // 移除写死的marginTop，适配不同屏幕尺寸
        elevation: 10,
    },
    textButton: {
        fontSize: 13,
        color: 'black',
    }
})

export default ModalContent

方案二：真实高斯模糊效果（视觉效果更优） #

如果需要实现真实的背景虚化效果，可使用第三方模糊库实现，操作步骤如下：

1. 安装依赖

npm install @react-native-community/blur --save
# iOS端执行后续安装
cd ios && pod install && cd ..

2. 替换背景层为模糊组件，修改后的核心代码如下：

import { BlurView } from '@react-native-community/blur';

// Modal内部背景替换为BlurView
<Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={toggleModal} >
    <TouchableWithoutFeedback onPress={toggleModal}>
        <BlurView 
            style={styles.modalBackground}
            // 模糊类型可选dark/light/xlight，调整blurAmount修改模糊程度
            blurType="dark"
            blurAmount={8}
        >
            <View style={styles.container}>
                {/* 原有弹窗内容 */}
            </View>
        </BlurView>
    </TouchableWithoutFeedback>
</Modal>

注意事项 #

• 方案一性能开销极低，无需额外配置，优先推荐使用。
• 方案二的原生模糊效果在Android 12及以上系统支持，低版本Android会自动降级为半透明背景。
• 原代码中container样式重复定义了alignItems属性，可根据需求删除多余配置。

内容的提问来源于stack exchange，提问作者Rutvik Prajapati