Блог

Главная - Вопросы по программированию - как сделать размытие фона, когда модальные окна открываются в реактивном режиме

как сделать размытие фона, когда модальные окна открываются в реактивном режиме

#react-native #react-native-android #react-native-stylesheet

Вопрос:

введите описание изображения здесь

 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

Ответ №1:

В случае, если вы используете expo, используйте import { BlurView } from 'expo-blur';

Когда я добавил BlurView в свой проект, я поискал некоторые сторонние библиотеки и в итоге добавил унимодули react-native.

Ответ №2:

просто добавьте фоновый цвет с непрозрачностью>>>>>>>>>>

Цвет фона: rgba(255, 0, 0, 0.2);

потому что в модальном режиме есть представление, содержащее представление, поэтому, если вы придадите цвет фона этому объединяющему виду, он добавит эффект черного

Ответ №3:

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

Ответ №4:

у вас есть несколько способов решить эту проблему, один из которых-использовать эту библиотеку

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

один из них с изображением с непрозрачностью размытия

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

другим подходом было бы отбрасывание тени с прозрачным фоном

я бы выбрал первый вариант, потому что я уже пробовал его

Метки: ,