react-native-image-crop-picker学习

本文主要是介绍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学习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---