react-native - React Native 的默认模态模糊
问题描述
当默认模式打开时,我想模糊我的屏幕背景。
我找到了这个用于模糊的库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,
},
});
推荐阅读
- swift - 无法让 CollectionView 中的自定义单元格正常工作
- python - 更新函数不更新表条目
- php - 防止在 php 中的平板电脑中重复数据
- wordpress - 以 CPT 标题为属性的简码
- html - 通过另一个列表后如何保持导航栏的粘性?
- javascript - Javascript 上的 ECDSA 签名验证失败(椭圆)
- vue.js - Bootstrap 样式优先于自定义 CSS
- xslt-2.0 - 使用 xstl 2.0 合并两个 xml 文件时如何保持第一个文件中元素的顺序
- numpy - XX^T 矩阵不是正定的,尽管它应该是
- java - 如何使用 Eclipse 一次在同一个工作区上构建多个 maven 项目?