使用react-native-blur
1.
npm install react-native-blur --save
react-native link react-native-blur
2.在安卓上只是link还是不够,还要配置,否则安装成功后还是闪退
打开android/app/build.gradle,添加加黑的代码
android { // make sure to use 23.0.3 or greater buildToolsVersion '23.0.3' // 这行与我根目录中的build.grale的版本一致 // ... defaultConfig { // Add these lines below the existing config renderscriptTargetApi 23 renderscriptSupportModeEnabled true } }
下面的图片是从官网截图来的
3.在需要的项目文件中引入
import { BlurView, VibrancyView } from "@react-native-community/blur";
4.使用的时候一定要将以下2个放在一起,不然没有效果
<BlurView style={styles.absolute} viewRef={this.state.viewRef} blurType="light" blurAmount={10} /> <Image ref={img => { this.backgroundImage = img; }} source={{ uri }} style={styles.absolute} onLoadEnd={this.imageLoaded.bind(this)} />