實現(xiàn)效果如下:
使用組件:?react-native-blur
實現(xiàn)步驟:?
1. 安裝 ?npm install react-native-blur
2. 鏈接到本地 ?react-native link react-native-blur
3. 配置android環(huán)境(將以下內容添加到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?- 常規(guī)模糊類型（僅限tvOS）
????????prominent?- 突出的模糊類型（僅限tvOS）
2.?blurAmount?（默認值：10婚被，數字）
? ? ? ? ? 0-100?- 調整模糊強度
注:?blurAmount 在android上的最大值是32,因此較高的值將被限制在32.
VibrancyView
屬性與BlurView相同,僅在ios上支持.另外VibrancyView必須包含嵌套視圖.
圖示效果具體實現(xiàn)代碼如下:?
