react-native-image-crop-picker 使用

2019独角兽企业重金招聘Python工程师标准>>>

##react-native-image-crop-picker 使用

###简介 iOS/Android image picker with support for camera, configurable compression, multiple images and cropping

• react-native-image-crop-picker 是一款照相、相册选择的react-native第三方。同时支持多选、裁剪
• 同时支持ios/Android
• 与它类似的第三方还有react-native-image-picker
• 粗略对比发现，觉得react-native-image-picker并没有react-native-image-crop-picker好用，但是react-native-image-crop-picker 在github上的星星远高于react-native-image-crop-picker。（可能不知道其中的优缺点吧）

安装

• 安装模块

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

• 安装模块后需要配置ios／android端的设置，

ios

1. 用xcode将项目打开，找到info.plist文件，添加键值对，允许访问相册和相机（做ios开发的都知道，app要调用相册、相机、通讯录什么的系统数据，需要用户授权），这样你的app就有权限访问相册和相机了
	
		访问相机:NSCameraUsageDescription   
		访问相册：NSPhotoLibraryUsageDescription

![MacDown Screenshot](https://static.oschina.net/uploads/img/201706/15193240_jW2j.png)

2. 将本模块中的ios文件夹里面的ImageCropPickerSDK 文件夹添加到xcode中
3. 在Embedded Binaries中添加RSKImageCropper.framework、QBImagePicker.framework(说明:这两个动态库就是上一步ImageCropPickerSDK里面的两个动态库)

![MacDown Screenshot](https://static.oschina.net/uploads/img/201706/15194420_gPlY.png)

Android(安卓配置看仔细点，别配置错了文件)

1. 确保你使用的是Gradle 2.2.x,打开文件（你的项目/android/build.gradle）

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

2. Add useSupportLibrary（你的项目/android/app/build.gradle）

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

3. [可选]If you want to use camera picker in your project, add following to AndroidManifest.xml

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

   可选也就是可不选嘛，我没管它（有知道作用的可以告诉我，谢谢啦）

使用（看看git上面的吧）

到目前为止，你已安装和配置完了，但是如何使用呢，这里做个简单的实例。你也可以参照官方例子，使用很简单，我就不做过多叙述！ 官方例子请点击

1. 导入 library

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

或者

	import {  NativeModules } from 'react-native';
	var ImagePicker = NativeModules.ImageCropPicker;

2. 使用

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

最后看下效果吧

转载于:https://my.oschina.net/KJhulinhua/blog/967911