react-native实现高斯模糊效果

实现效果如下:

简易高斯模糊效果

使用组件: 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

    }

}

4. 将库导入代码中使用 import {} from 'react-native-blur';

BlurView

属性

1. blurType: 值为字符串 

        xlight: 额外的光线模糊类型

        light: 光线模糊类型

        dark: 黑暗模糊类型

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

        regular - 常规模糊类型（仅限tvOS）

        prominent - 突出的模糊类型（仅限tvOS）

2. blurAmount （默认值：10，数字）

          0-100 - 调整模糊强度

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

VibrancyView

属性与BlurView相同,仅在ios上支持.另外VibrancyView必须包含嵌套视图.

图示效果具体实现代码如下: 

高斯模糊简易实现