如何解决如何在本机反应中添加模糊效果?
如何在react native中向视图添加模糊,就像我们将其应用于Image或BackgroundImage一样。如果该视图使用rgba具有半透明的背景...我也想为其添加模糊效果。
示例代码
<ImageBackground style={styles.bg}>
<View style={styles.content} />
</ImageBackground>
const styles = StyleSheet.create({
bg: {
width: “100%”,height: “100%”
},content:{
width: “70%”,height: “70%”,backgroundColor: “rgba(255,255,355,0.4)”,alignSelf: “center”
}
})
解决方法
您可以使用不透明性
const styles = StyleSheet.create({
bg: {
width: “100%”,height: “100%”,Opacity:0.5
},content:{
width: “70%”,height: “70%”,backgroundColor: “rgba(255,255,355,0.4)”,alignSelf: “center”
}
})
,
最简单的方法是执行以下操作:
import React,{ Component } from 'react';
import { View,Text,ImageBackground,StyleSheet } from 'react-native';
const BlurImage = () => {
return (
<ImageBackground source={require('your picture')} style={styles.ImageBackground}>
<View style={styles.container}>
<Text style={styles.text}> CSS Tricks </Text>
<Text style={styles.text}>You can style your Text and View as you deem fit</Text>
</View>
</ImageBackground>
);
}
export default BlurImage;
const styles = StyleSheet.create({
ImageBackground: {
flex: 1,width: null,height: null,},container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'rgba( 0,0.6 )',text: {
color: 'white',fontSize: 24
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。