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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM