使用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)}
        />

 

 

转载于:https://www.cnblogs.com/lude1994/p/11113163.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值