[RN] React Native 使用開源庫 react-native-image-crop-picker 實現圖片選擇、圖片剪裁

React Native 使用開源庫 react-native-image-crop-picker 實現圖片選擇、圖片剪裁

該庫可以實現啟動本地相冊和照相機來采集圖片，並且提供多選、圖片裁剪等功能，支持iOS和Android兩個平台，不同平台需要分別配置，詳細的文字說明見github。

 

一、安裝

npm install react-native-image-crop-picker -S

react-native link react-native-image-crop-picker 

 

二、配置

1）Android

a、Gradle版本必須大於2.2

b、

打開android下的build.gradle ，加入 maven { url "https://jitpack.io" }

allprojects {
  repositories {
    jcenter()
    maven { url "https://jitpack.io" }
   }
}

 

同時 打開android/app下的build.gradle，在android / defaultConfig / 節點下添加useSupportLibrary

android {  
    ...  
    defaultConfig {  
        ...  
        vectorDrawables.useSupportLibrary = true  
        ...  
    }  
    ...  
} 

c、打開android/app/src/main/AndroidManifest.xml配置文件，添加權限：

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

d、settings.gradle 添加  （如已被 link 添加，則可跳過）

include ':react-native-image-crop-picker'
project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-crop-picker/android')

e、MainApplication  中添加   （如已被 link 添加，則可跳過）

 

import com.reactnative.ivpusic.imagepicker.PickerPackage;




******

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new ReactVideoPackage(),
            new OrientationPackage(),
            new VectorIconsPackage(),
            new PickerPackage()
      );
    }

******

 

2）IOS

由於 筆者 暫時是在Android下開發，后續在IOS中 實踐通過，再補充！

 

三、使用

1）引用

import ImagePicker from 'react-native-image-crop-picker'; 

 

 

2）調用

    // 從本地相冊選擇單幅圖像
    ImagePicker.openPicker({  
      width: 400,  
      height: 400,  
      cropping: true  
    }).then(image => {  
      console.log(' 圖片路徑：'+ image);  
    }); 
     
    // 調用多個圖像
    ImagePicker.openPicker({  
      multiple: true  
    }).then(images => {  
      console.log(images);  
    });
     
    // 啟動相機拍照
    ImagePicker.openCamera({  
      width: 400,  
      height: 400,  
      cropping: true  
    }).then(image => {  
      console.log(image);  
    }); 
     
    // 裁剪已有的圖片
    ImagePicker.openCropper({  
      path: 'image-file-path.jpg',  
      width: 400,  
      height: 400  
    }).then(image => {  
      console.log(image);  
    });

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10960484.html

轉載請著名出處！謝謝~~