当默认模式打开时,我想模糊我的屏幕背景。
我找到了这个模糊库 https://github.com/react-native-community/react-native-blur
有没有人做到了?
我没有在模态上找到只有背景颜色的解决方案。
谢谢
最佳答案
您不需要使用任何库来实现这种模糊效果。下面是在 Modal 打开时模糊背景图像的代码。
{/*blurRadius is initially 0 and 4 when modal active more the blurradius more is blur effect of image*/}
import React, { Component } from 'react';
import {
Modal,
Button,
View,
Text,
StyleSheet,
ImageBackground,
} from 'react-native';
export default class App extends Component {
state = {
isVisible: false,
};
render() {
return (
<ImageBackground
style={styles.container}
blurRadius={this.state.isVisible ? 4 : 0}
source={require('./bgimage.jpeg')}>
<Modal
animationType={'fade'}
transparent={true}
visible={this.state.isVisible}
onRequestClose={() => {
console.log('Modal has been closed.');
}}>
<View style={styles.modal}>
<Text style={styles.text}>Modal is open!</Text>
<Button
title="Click To Close Modal"
onPress={() => {
this.setState({ isVisible: !this.state.isVisible });
}}
/>
</View>
</Modal>
<Button
title="Click To Open Modal"
onPress={() => {
this.setState({ isVisible: true });
}}
/>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
},
modal: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#606070',
margin: 50,
},
text: {
color: '#3f2949',
marginTop: 10,
},
});
关于react-native - 在 React Native 的默认模式中模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54967931/