react-native的Image添加毛玻璃效果

2022-07-20  本文已影响0人  sunny635533

图片添加毛玻璃效果,不需要添加爱第三方库,用自带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,
    },
})
上一篇 下一篇

猜你喜欢

热点阅读