github react-native-image-crop-picker

文章已更新2018/8/28日 有些问题问的比较多，这里做一个简叙，看客自己决定是否依赖。

1、需要裁剪可以用这个库, 不需要裁剪推荐react-native-image-picker
2、 Android是否支持多选？
笔者试了下小米、魅族、坚果、IOS是可以的。如作者所说，多个选择取决于手机制造商。一些制造商不支持它。这还取决于操作系统版本。尝试长按图片。
3、安装失败、不能运行等问题。移步 issues 很多问题都可以解决。

文章已更新2017/6/19日 如有错误不妥的地方，请及时联系我更正。谢谢

react-native-image-crop-picker是一款注重剪裁,相册单选、多选的第三方框架。在我集成了react-native-image-picker的时候发现，他的剪裁不太友好。作者推荐了这个react-native-image-crop-picker。看到搜索不到该中文的翻译，故此文作为学习总结。

实际效果:

我用的是魅族pro6, 实现和github作者图有点出入, 基本没有自己处理界面，我觉得还是可以接受的。

图1.照相机裁剪旋转.jpg

图2.相册选择.jpg

react-native-image-crop-picker 原文如下：

支持IOS/Android的相机，视频压缩，多个图像选择和裁剪处理。

github效果

Paste_Image.png

Paste_Image.png

使用

导入library

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

从图库中选择

调用单图选择器与裁剪

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

选择多个图片的选择器

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

从照相中选择

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

裁剪图片

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

选择清理

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

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

请求对象

注：这里希望开发者不清楚的可以自己尝试，看下效果

返回对象

安装

npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker

安装后步骤

iOS (IOS没了解,暂时没有去进行翻译)

cocoapods users
    Add platform :ios, '8.0'to Podfile (!important)
    Add pod 'RSKImageCropper' and pod 'QBImagePickerController'to Podfile

non-cocoapods users
     Drag and drop the ios/ImageCropPickerSDK folder to your xcode project. (Make sure    
     Copy items if needed IS ticked)
     Click on project General tab
          Under Deployment Info set Deployment Target to 8.0
          Under Embedded Binaries click + and add RSKImageCropper.framework  and 
             QBImagePicker.framework

Android

• 保证你使用了 Gradle 2.2.x 以上 (project build.gradle)

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
        ...
    }
    ...
}

• app build.gradle 中添加useSupportLibrary

  android {
    ...

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

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

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

构建

Android:
不需要其他操作

iOS

 cocoapods users
      你已经完成，不需要其他的操作；
 non-cocoapods users
     If you are using pre-built frameworks from ios/ImageCropPickerSDK
     , then before deploying app to production you should strip off simulator 
     ARCHs from these, or you can add frameworks 
     from Libraries/imageCropPicker/Libraries/_framework_name_.
     xcodeproj/Products/_framework_name_.framework
     to Embedded Binaries instead of pre-built ones. Related 
     issue: [https://github.com/ivpusic/react-native-image-crop-
     picker/issues/61](https://github.com/ivpusic/react-native-image-crop-
     picker/issues/61).

Details for second approach:
     1.  Remove the pre-built frameworks from Embedded Binaries
     2.  Build for Device
     3.  Add the newly built binaries for both frameworks to Embedded Binaries (located at Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework)  

许可

MIT