native react 图片裁剪_[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配置文件，添加权限：

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;******@Overrideprotected ListgetPackages() {return Arrays.asList(newMainReactPackage(),newReactVideoPackage(),newOrientationPackage(),newVectorIconsPackage(),newPickerPackage()

);

}******

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);

});

转载请著名出处！谢谢~~