图片添加毛玻璃效果,不需要添加爱第三方库,用自带blurRadius属性,另外需要修改覆盖层颜色,只需盖上一层view就好了。android和ios都通用。
效果如下:
image.png
代码:
<View style={styles.followContainer}>
<Image
blurRadius={40}
source={require("@assets/home/follow/test.png")}
style={styles.blurImage}
resizeMode={"stretch"}
/>
<View style={[styles.blurImage, {
backgroundColor: Platform.OS == 'ios' ? "rgba(70, 70, 70, 0.3)" : "rgba(70, 70, 70, 0.26)"
}]} />
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F8F9FA",
paddingBottom: safeBottom
},
blurImage: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 0,
height: imgHeight,
width: imgWidth,
},
})
网友评论