实现效果如下:
使用组件: 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必须包含嵌套视图.
图示效果具体实现代码如下:
