react-native 实现高斯模糊效果(毛玻璃)

因为react-native样式的局限性,无法对图片直接实现一个特殊的效果,例如CSS3中的filter:属性。

这时就需要  React Native Blur 组件   


1. 安装  npm install react-native-blur

2. 链接到本地  react-native link react-native-blur

3. 配置android环境(将以下内容添加到android/app/build.gradle):

android {

    // make sure to use 23.0.3 instead of 23.0.1

    buildToolsVersion '23.0.3'

    // ...

    defaultConfig {

        // Add these lines below the existing config

        renderscriptTargetApi 23

        renderscriptSupportModeEnabled true

    }

}

BlurView

属性

1. blurType: 值为字符串 

        xlight: 额外的光线模糊类型

        light: 光线模糊类型

        dark: 黑暗模糊类型

        extraDark: 超暗模糊类型(仅限ios)

        regular - 常规模糊类型(仅限ios)

        prominent - 突出的模糊类型(仅限ios)

2. blurAmount (默认值:10,数字)

          0-100 - 调整模糊强度

注: blurAmount 在android上的最大值是32,因此较高的值将被限制在32.



屏幕快照 2018-07-23 下午11.12.36.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容