本文主要是介绍react-native-image-crop-picker学习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
github react-native-image-crop-picker
http://www.jianshu.com/p/8420b08062c7
react-native-image-crop-picker是一款注重剪裁,相册单选、多选的第三方框架。在我集成了react-native-image-picker的时候发现，他的剪裁不太友好。作者推荐了这个react-native-image-crop-picker。看到搜索不到该中文的翻译，故此文作为学习总结。
实际效果:
我用的是魅族pro6, 实现和github作者图有点出入, 基本没有自己处理界面：我觉得还是可以接受的。
react-native-image-crop-picker 原文如下：
支持IOS/Android的相机，视频压缩，多个图像选择和裁剪处理。
github效果
使用
导入
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);});选择清理
模块创建临时文件图像将在未来的某个地方自动清理。 如果要强制清理，可以使用clean清理所有临时文件图像，或者使用cleanSingle（path）清除单个临时文件。
ImagePicker.clean().then(() => { console.log('removed all tmp images from tmp directory');}).catch(e => { alert(e);});请求对象
| 参数 | 类型 | 描述 |
|---|---|---|
| cropping | bool (default false) | 是否打开裁剪 |
| width | number | 与cropping=true一起使用的，裁剪后的宽度 |
| height | number | 与cropping=true一起使用的，裁剪后的高度 |
| multiple | bool (default false) | 启用或禁用多个图像选择 |
| includeBase64 | bool (default false) | 启用或禁用使用图像返回base64数据 |
| cropperTintColor (android only | string (default "#424242") | 裁剪图像时，确定工具栏和其他UX元素的颜色。 使用UCrop的setToolbarColor，setActiveWidgetColor和setStatusBarColor颜色指定。 |
| maxFiles (ios only) | number (default 5) | 最多能够选取的文件数,配合multiple=true |
| compressVideo (ios only) | bool (default true) | 选择视频时，压缩它并将其转换为mp4 |
| smartAlbums (ios only) | array (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']) | (智能相册列表可供选择)List of smart albums to choose from 【有点后续理解】 |
返回对象
| 参数 | 类型 | 描述 |
|---|---|---|
| path | string | 选中文件的位置 |
| width | number | 选中文件的宽度 |
| height | number | 选中文件的高度 |
| mime | string | 选中图片的MIME类型(image/jpeg, image/png) |
| size | number | 所选图像大小（以字节为单位） |
| data | base64 | (已选择的可选base64文件体现)Optional base64 selected file representation |
安装
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker安装后步骤
iOS (IOS没了解,暂时没有去进行翻译)
cocoapods usersAdd platform :ios, '8.0'to Podfile (!important)Add pod 'RSKImageCropper' and pod 'QBImagePickerController'to Podfilenon-cocoapods usersDrag and drop the ios/ImageCropPickerSDK folder to your xcode project. (Make sure Copy items if needed IS ticked)Click on project General tabUnder Deployment Info set Deployment Target to 8.0Under Embedded Binaries click + and add RSKImageCropper.framework and QBImagePicker.frameworkAndroid[可选]如果你想选择相册在你的项目中 在AndroidManifest.xml中 <uses-permission android:name="android.permission.CAMERA"/>构建
iOS
cocoapods users你已经完成。non-cocoapods usersIf 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 Binaries2.Build for Device3.Add the newly built binaries for both frameworks to Embedded Binaries(located at Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework)如何工作的
基本包含的库。
Android ：Native Image PickeruCrop
iOS: QBImagePickerControllerRSKImageCropper这篇关于react-native-image-crop-picker学习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
