在 React Native 中打开模态时如何使背景模糊

Question

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

const ModalContent = ({ visiblity, toggleModal }) => {
    return (
        <Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={() => {
            toggleModal()
        }} >
            <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>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderTopRightRadius: 25,
        borderTopLeftRadius: 25,
        height: 150,
        alignItems: 'center',
        elevation: 10,
        alignItems: 'flex-start',
        justifyContent: 'space-around',
        paddingLeft: 20,
        marginTop: 420
    },

    textButton: {
        fontSize: 13,
        color: 'black',
    }
})

export default ModalContent


    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

const ModalContent = ({ visiblity, toggleModal }) => {
    return (
        <Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={() => {
            toggleModal()
        }} >
            <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>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderTopRightRadius: 25,
        borderTopLeftRadius: 25,
        height: 150,
        alignItems: 'center',
        elevation: 10,
        alignItems: 'flex-start',
        justifyContent: 'space-around',
        paddingLeft: 20,
        marginTop: 420
    },

    textButton: {
        fontSize: 13,
        color: 'black',
    }
})

export default ModalContent

Answer 1

如果您使用的是 expo，请使用 import { BlurView } from 'expo-blur';

当我将 blurView 添加到我的项目时，我浏览了一些第三方库并最终添加了 react-native-unimodules。

Answer 2

你有多种方法可以解决这个问题一个正在使用这个库

https://github.com/Kureev/react-native-blur

一个是带有不透明度模糊半径的图像

<Image
    style={{opacity:0.8}
    resizeMode='cover'
    source={path} 
    blurRadius={1}
/>

另一种方法是在透明背景下放置阴影

我会选择第一个选项，因为我已经尝试过了

Answer 3

只需添加不透明度的背景颜色>>>>

背景颜色：rgba(255, 0, 0, 0.2);

因为在模态中有视图包含视图所以如果你给那个conatining视图背景颜色它会添加黑色效果

Answer 4

https://www.npmjs.com/package/@react-native-community/blur

您可以使用 blurview，这样您就可以在打开底页时触发模糊，或者使其正常

.
.
.
.

const [opensheet,setopensheet]=useState(false)
const [blur,setblur]=useState(0)
const ViewRef=useRef()
useEffect(
()=>
{
    const changeBlur=()=>
    {
        if(opensheet)
        setblur(25)
        else
        setblur(0)
        
        
    }
    
    
    changeBlur()
},
[opensheet]
)
.
.
.
return
(
    <BlurView
    ref={ViewRef}
     blurAmount={blur}
    >
    .
    .
    .
)

--这里的 opensheet 是由 bool open/true 和 close/false

定义的模态状态

在 React Native 中打开模态时如何使背景模糊

how to make background blur when modal open ups in reactnative

react-native

react-native-android

react-native-stylesheet