react native之第三方库的相册相机(可裁剪可压缩等)等操作

第三方库的原生相册相机操作。第三方的react-native-image-crop-picker的功能更为完整易用（可多选、压缩、裁剪等）。

https://github.com/ivpusic/react-native-image-crop-picker //GitHub地址

这里说一下配置说明：

npm i react-native-image-crop-picker --save //安装依赖

react-native link react-native-image-crop-picker //链接原生库

ios配置权限： 注意:这里权限的值随便写,必须要写。

Xcode打开info.plist.在最下面一行点击+号(表示新增一行)或者鼠标在空白处右击Add Row.结果都是一样的新增一行.

在上一步骤的新的一行中选择Privacy-photo Library....增加访问相册的权限

注意:这里值随便写,必须要写。

重复以上步骤增加相机和麦克风的权限

权限配置后安装cocoaPods：教程在我的开源中国：https://my.oschina.net/u/3112095/blog/1553404

安装后cd进去我的RN项目，进入ios文件。执行pod init生成一个podFile文件

cd ios
pod init

打开podfile文件把TVOS等没用的删除。增加以下

platform :ios,'8.0'//这里创建的时候是什么就是什么，不用改

target 'your_project_name' do
pod 'RSKImageCropper' //主要要这句
pod 'QBImagePickerController' //主要还有这句
end

最后执行:

pod install

执行后关闭xcode。以后xcode运行项目不能打开.xcodeproj文件，运行项目的话要打开.xcworksspace的文件。否则报错找不到

Android配置:

注意:保证使用了Gradle 2.2.x以上。

app build.gradle 中添加useSupportLibrary

android {
    ...

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

[可选] 如果使用照相机在你的项目中,AndroidManifest.xml添加

<uses-permission android:name="android.permission.CAMERA"/> //相机权限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> //写入权限

使用

导入library

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

从图库中选择：

①调用单图选择器与裁剪

ImagePicker.openPicker({
      width: 300,height: 400,cropping: true
   }).then(image => { 
      console.log(image);
   }).catch(e => {
           console.log(e);
    });

②选择多个图片的选择器

ImagePicker.openPicker({
      multiple: true
  }).then(images => {
      console.log(images);
  }).catch(e => {
      console.log(e);
  });

从照相中选择：

ImagePicker.openCamera({
        width: 300,cropping: true
    }).then(image => { 
        console.log(image);
    }).catch(e => {
        console.log(e);
    });

裁剪图片：

ImagePicker.openCropper({
    path: 'my-file-path.jpg',width: 300,height: 400
  }).then(image => {
     console.log(image);
  }).catch(e => {
      console.log(e);
  });

选择清理：

模块创建临时文件图像将在未来的某个时间自动清理。 如果要强制清理，可以使用clean清理所有临时文件图像，或者使用cleanSingle（path）清除单个临时文件。

ImagePicker.clean().then(() => { 
       console.log('removed all tmp images from tmp directory');
  }).catch(e => { 
       alert(e);
  });

请求对象：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!