syanbo / react-native-syan-image-picker

React-Native 多图片选择 支持裁剪 压缩

react-native-syan-image-picker

功能介绍

基于已有原生第三方框架封装的多图片选择组件，适用于 React Native App。

原生框架依赖

• Android： PictureSelector - by LuckSiege
• iOS：TZImagePickerController - by banchichen

功能特点

• 支持 iOS、Android 两端
• 支持单选、多选
• 可自定义裁剪区域大小，支持圆形裁剪
• 可设置压缩质量
• 可设置是否返回图片 base64 编码
• 支持记录当前已选中的图片
• 支持删除指定下标的图片

Live

安装使用

安装

// Step 1 基于 npm
npm install react-native-syan-image-picker --save

// 或是 yarn
yarn add react-native-syan-image-picker

// Step 2 执行 link
react-native link react-native-syan-image-picker

其他配置

iOS

1、添加原生框架中所需的 bundle 文件：

RN版本0.60+使用 pod 不需要如下配置

• TARGETS -> Build Phases -> Copy Bundle Resources 点击"+"按钮，在弹出的窗口中点击“Add Other”按钮，选择

  node_modules/react-native-syan-image-picker/ios/TZImagePickerController/TZImagePickerController.bundle
  

2、添加相册相关权限：

• 项目目录->Info.plist->增加

 Privacy - Camera Usage Description 是否允许此App使用你的相机进行拍照？
 Privacy - Photo Library Usage Description 请允许访问相册以选取照片
 Privacy - Photo Library Additions Usage Description 请允许访问相册以选取照片
 Privacy - Location When In Use Usage Description 我们需要通过您的地理位置信息获取您周边的相关数据

3、中文适配：

• 添加中文 PROJECT -> Info -> Localizations 点击"+"按钮，选择Chinese(Simplified)

4、更新TZImagePickerController版本

pod update TZImagePickerController

Android

1、在 AndroidManifest.xml 中添加权限：

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

2、更新到 PictureSelector需要修改minSdkVersion：

// app/build.gradle

android {
    minSdkVersion = 19
    ...
}

3、拍照前动态获取权限

requestPermission = async () => {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                {
                    title: '申请读写手机存储权限',
                    message:
                        '一个很牛逼的应用想借用你的摄像头，' +
                        '然后你就可以拍出酷炫的皂片啦。',
                    buttonNeutral: '等会再问我',
                    buttonNegative: '不行',
                    buttonPositive: '好吧',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log('现在你获得摄像头权限了');
            } else {
                console.log('用户并不给你');
            }
        } catch (err) {
            console.warn(err);
        }
    };

4、同时使用 fast-image 需要使用glide 版本

在build.gradle的buildscript，ext下新增glideVersion指定和fast-image一样的版本 新增 pictureVersion 自定义picture_library版本

5、同时使用 react-native-image-crop-picker

• 修改react-native-image-crop-picker/android/build.gradle implementation 'com.github.yalantis:ucrop:2.2.6-native' 替换为 implementation 'io.github.lucksiege:pictureselector:v2.7.3-rc08'

• 修改react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java uCrop.start(activity); 替换为 uCrop.start(activity, UCrop.REQUEST_CROP);

推荐使用 patch-package 对刚刚修改进行 patch 执行patch-package react-native-image-crop-picker

注意安装运行报错

1. 检查自动 link 是否成功
2. 使用 Android Studio 查看 MainApplication.java 文件是否添加 new RNSyanImagePickerPackage()
3. 使用 Android Studio 打开项目检查 Gradle 是否同步完成

link失败手动添加（<0.60）

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-syan-image-picker and add RNSyanImagePicker.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNSyanImagePicker.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.reactlibrary.RNSyanImagePickerPackage; to the imports at the top of the file
• Add new RNSyanImagePickerPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-syan-image-picker'
   project(':react-native-syan-image-picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-syan-image-picker/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-syan-image-picker')

配置参数说明

组件调用时，支持传入一个 options 对象，可设置的属性如下：

属性名	类型	是否可选	默认值	描述
imageCount	int	是	6	最大选择图片数目
isRecordSelected	bool	是	false	记录当前已选中的图片
isCamera	bool	是	true	是否允许用户在内部拍照
isCrop	bool	是	false	是否允许裁剪，imageCount 为1才生效
CropW	int	是	screenW * 0.6	裁剪宽度，默认屏幕宽度60%
CropH	int	是	screenW * 0.6	裁剪高度，默认屏幕宽度60%
isGif	bool	是	false	是否允许选择GIF，暂无回调GIF数据
showCropCircle	bool	是	false	是否显示圆形裁剪区域
circleCropRadius	float	是	screenW * 0.5	圆形裁剪半径，默认屏幕宽度一半
showCropFrame	bool	是	true	是否显示裁剪区域
showCropGrid	bool	是	false	是否隐藏裁剪区域网格
compress	bool	是	true	是否开启压缩（不开启压缩部分图片属性无法获得
compressFocusAlpha	bool	是	false	压缩时保留图片透明度（开启后png压缩后尺寸会变大但是透明度会保留
quality	int	是	90	压缩质量(安卓无效，固定鲁班压缩)
minimumCompressSize	int	是	100	小于100kb的图片不压缩（Android）
enableBase64	bool	是	false	是否返回base64编码，默认不返回
freeStyleCropEnabled	bool	是	false	裁剪框是否可拖拽（Android）
rotateEnabled	bool	是	true	裁剪是否可旋转图片（Android）
scaleEnabled	bool	是	true	裁剪是否可放大缩小图片（Android）
showSelectedIndex	bool	是	false	是否显示序号

返回结果说明

以 Callback 形式调用时，返回的第一个参数为错误对象，第二个才是图片数组：

属性名	类型	描述
error	object	取消拍照时不为 null，此时 error.message == '取消'
photos	array	选择的图片数组

而以 Promise 形式调用时，则直接返回图片数组，在 catch 中去处理取消选择的情况。

下面是每张图片对象所包含的属性：

属性名	类型	描述
width	int	图片宽度
height	int	图片高度
uri	string	图片路径
original_uri	string	图片原始路径，仅 Android
type	string	文件类型，仅 Android，当前只返回 image
size	int	图片大小，单位为字节 b
base64	string	图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性

方法调用

Callback

回调形式需调用 showImagePicker 方法：

import SyanImagePicker from 'react-native-syan-image-picker';

SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {
  if (err) {
    // 取消选择
    return;
  }
  // 选择成功，渲染图片
  // ...
})

Promise

非回调形式则使用 asyncShowImagePicker 方法：

import SyanImagePicker from 'react-native-syan-image-picker';

// promise-then
SYImagePicker.asyncShowImagePicker(options)
  .then(photos => {
    // 选择成功
  })
  .catch(err => {
    // 取消选择，err.message为"取消"
  })

// async/await
handleSelectPhoto = async () => {
  try {
    const photos = await SYImagePicker.asyncShowImagePicker(options);
    // 选择成功
  } catch (err) {
    // 取消选择，err.message为"取消"
  }
}

移除选中图片

在 React Native 页面移除选中的图片后，需调用 removePhotoAtIndex 方法，来删除原生中保存的图片数组，确保下次进入图片选择时，已选中的图片保持一致：

handleDeletePhoto = index => {
  const { selectedPhotos: oldPhotos } = this.state;
  const selectedPhotos = oldPhotos.filter((photo, photoIndex) => photoIndex !== index);
  // 更新原生图片数组
  SYImagePicker.removePhotoAtIndex(index);
  // 更新 RN 页面
  this.setState({ selectedPhotos });
}

移除全部选中图片

STImagePicke.removeAllPhoto()

调用相机

相机功能调用方法，一样支持 Callback 和 Promise 两种形式，结果参数也保持一致。

 //Callback方式
SyanImagePicker.openCamera(options, (err, photos) => {
  if (err) {
    // 取消选择
    return;
  }
  // 选择成功，渲染图片
  // ...
})

//Promise方式
 SYImagePicker.asyncOpenCamera(options)
 .then(()=>{
   ...
 })
 .catch(()=>{
   ...
 })

选择视频

SyanImagePicker.openVideoPicker(options, (err, videos) => {
  if (err) {
    // 取消选择
    return;
  }
  // 选择成功，处理视频
  // ...
})

options 可选配置：

{
  MaxSecond: 60,
  MinSecond: 0,
  recordVideoSecond: 60,
  videoCount: 1
}

返回结果：

type	value	iOS	Android
uri	string	✅	✅
fileName	string	✅	✅
size	string	✅	✅
duration	number	✅	✅
width	number	✅	✅
height	number	✅	✅
type	string	✅	✅
mime	string	✅	✅
coverUri	string	✅	✅
favorite	string	✅	❌
mediaType	string	✅	❌

Android 返回结果：

{
  mime: "video/mp4",
  type: "video",
  height: 1080,
  width: 1920,
  duration: 30.22,
  size: 63876724,
  fileName: "VID_20200409_11492864.mp4",
  uri: "file:///storage/emulated/0/DCIM/Camera/VID_20200409_11492864.mp4",
  coverUri: "file:///storage/emulated/0/Android/data/package_id/cache/thumb-c3c99b6a.jpg"
}

注：uri 包含协议 "file://"

删除缓存

SYImagePicker.deleteCache();

版本记录

• 0.4.10 新增showSelectedIndex参数，是否显示选中序号

帮助

加入 React-Native QQ群 397885169

非常感谢

LuckSiege

banchichen

ljunb

捐赠

随时欢迎！！☕️☕️☕️✨✨

react-native-syan-image-picker's Issues

Demo实例无法实现拍照功能

ImagePickerExample实例选择拍摄就出现闪退的情况

压缩部分代码是有误吗？

很方便的控件，但发现iOS上图片质量很差，修改以下代码后正常，麻烦检查一下：
RNSyanImagePicker.m

74行

NSInteger   quality  = [options sy_integerForKey:@"quality"];

266 / 271 行

UIImageJPEGRepresentation(image, quality * 1.0 / 100);

另外，266/271行为啥要分两次压缩而不重用data？
返回base64是否可选好一点？

其它代码和Android还没有看，感谢！ @syanbo

报错 方法未定义

编译成功后点击选择照片就报错 内置的几个方法都没用

通过相机选择图片之后，无法弹出自己的modal

我用的是react-native-navigation导航库，这个导航库是一个原生实现的导航库，其中有一个showModal的方法，在我通过相机选择图片之后，发现有时候无法弹出自己的modal

请问是否支持选取框缩放呢

目前options并没有看到相关的设置

gradle和react-native的版本比较低，打包的时候会说google()这个找不到，有什么解决办法吗

Failed to resolve: com.github.LuckSiege.PictureSelector:picture_library:v2.2.2

我的gradle版本是3.5但是还是报了如题的错误
compileSdkVersion 23
buildToolsVersion "23.0.1"

sdk版本必须是26吗？

想修改颜色如何修改

想修改颜色如何修改

缺少appcompatv7-27.0.2的相关jar包

为什么我Android的配置总是出现缺少appcompatv7-27.0.2的相关jar包这样的错误信息提示，跑步起来，请作者大大指导一下

引入例子 挂了

undefined showimagePicker

编译报错

按照文档来显示

和react-native-image-crop-picker插件报冲突了

因为项目之前用了crop-picker，所以暂时不能删，引进该库后，编译报错了，麻烦看下呢？

支持分辨率设置么

react-native-image-picker 支持分辨率设置
这个组件支持么?

gradle插件和gradle版本问题

readme.md中建议的gradle插件版本为2.2.3。
demo中使用的的gradle插件版本为3.1.0

gradle插件版本为2.2.3支持的gradle版本为2.14——4.4。
使用2.14会报出很多奇怪的错误。
比如缺少appcompatv7-27.0.2的相关jar包。
android的sdkmanager相关的support最多只能升到26

建议提高gradle插件版本。并且使用高版本的gradle。

建议readme.md 中声明gradle插件版本

安卓一次性选择多张 特别慢而且容易崩溃

解决了

关于压缩

请问quality: 90 // 压缩质量 取值范围是多少 ？ 支持不压缩吗？原生的参数 很多暂时不可用。
建议：相册选取返回filesize 压缩质量可以选择是否压缩

执行npm update react-native-syan-image-picker 更新模块无效

执行npm update react-native-syan-image-picker 更新模块无效

android点击取消按钮没有回调 ios有回调

android点击取消按钮没有回调 ios有回调。
android 7.0
react native 0.49.5

RNSyanImagePicker.podspec

我是用pod导入的
pod.file
pod 'RNSyanImagePicker', :path => '../node_modules/react-native-syan-image-picker/ios'

pod install后

- ERROR | attributes: Missing required attribute `homepage`.

RNSyanImagePicker.podspec里的
s.homepage = ""
改为
s.homepage = "https://github.com/syanbo/react-native-syan-image-picker"
就好了

RNSyanImagePick.openCamera一直报这个错误

undefined is not an object (evaluating 'RNSyanImagePicker.openCamera')
openCamera
D:\project\imageApp\node_modules\react-native-syan-image-picker\index.js:99:26
handleLaunchCamera
D:\project\imageApp\index.android.js:78:33
touchableHandlePress

为什么经常报这个错误

在图库中选择完成后，再点击图库选择 ，是否可以把上次选择完的显示已选中状态？

图片转base64的时候是异步的吗？

我一下选了多张图片，感觉app要崩溃了一样

import com.reactlibrary.RNSyanImagePickerPackage;

MainApplication.java:9: 错误: 程序包com.reactlibrary不存在
import com.reactlibrary.RNSyanImagePickerPackage;

图片压缩问题

请问一下图片质量压缩支持吗？比如用户传一个单反相机的拍的照片 使用该插件应该如何处理呢

能不能暴漏一个预览的方法

我看这个预览挺好的,如果可以的话，希望可以新增一个图片预览的方法，并且能够取消选择已选图片。

SyanImagePicker.previewImages(this.state.images, clickIndex, (({isCancel, newImages}) => {
  !isCancel && this.setState({images: newImages})
}))

图片预览问题

看了下android PictureSelector库里面有图片预览功能,而且处理了可取消选择，只需传递下标，希望下个版本添加预览功能。

安卓 汉化

只有ios中文 安卓怎么汉化啊~

多点几次选择相册，程序奔溃

多点几次选择相册，程序奔溃，求助！！

引入libRNSyanImagePicker.a ios运行报错

linker command failed with exit code 1 (use -v to see invocation)

希望“完成”按钮文字可以自定义，我想改成“发送”

这是一个非常棒的库，感谢作者无私奉献！我目前遇到了一个小问题，我希望把“完成”按钮的文字替换成“发送”，希望能够提供自定义按钮文字的接口，非常感谢！

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-image-crop-picker:mergeReleaseResources'.

java.io.IOException: Could not delete path 'E:\rsszhApp\node_modules\react-native-image-crop-picker\android\build\intermediates\res\merged\release\layout-watch-v20'.

支持选择视频吗

支持选择视频吗

Android 选择一张图片， 图片被放大了

打开相册， 选择一张照片后， 发现我选择的图片被放大了。 选择为压缩， 压缩质量为默认的。 希望大神能support 一下。 谢谢。

ios编译出错

ios编译出现一个错误，我不懂oc，能帮忙看一下是什么原因吗。xcode用的是9.2

在android的8.0.0中出现闪退，这个是在小米上调试出现的错误状态java.lang.IllegalArgumentException:Failed to find configured root that contains /storage/emulated/0/PictureSelector/CameraImage/PictureSelector_20180514_110940.png

安卓集成之后可以运行，但点击直接闪退，log日志提示缺少jar包

iphoneX 选相册的时候 右下角的完成比左下角的预览位置要低一些 两个不对齐

选择好的图片返回数据中能加上图片大小(size)属性。现在只有路径和长宽

android 点击相册中的相机闪退

"react-native": "0.49.5",
"react-native-syan-image-picker": "0.0.6",
android 7.0
华为x6

最新的react-native-syan-image-picker 添加到项目中是0.06版本
as打印的错误

@syanbo @ljunb

Could not find method google() for arguments [] on repository container.

安卓配置完成，运行时报错

支持获取图片的base64码吗

android上为什么选用的图片的大小比原始的大10多倍是为啥呢

android打包失败

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:processDebugManifest'.

Manifest merger failed : Attribute meta-data#android.support.FILE_PROVIDER_PATHS@resource value=(@xml/file_paths) from [YouthHealthWorkerApp:react-native-syan-image-picker:unspecified] AndroidManifest.xml:23:17-51
is also present at [YouthHealthWorkerApp:react-native-image-picker:unspecified] AndroidManifest.xml:19:17-55 value=(@xml/provider_paths).
Suggestion: add 'tools:replace="android:resource"' to element at AndroidManifest.xml to override.

该库裁剪下来的图片是圆形的还是方形的？

RT.RT.

TARGETS -> Build Phases -> Link Binary -> Copy Bundle Resources 点击"+"按钮，在弹出的窗口中点击“Add Other”按钮，选择

你这句描述有问题啊

1. TARGETS -> Build Phases -> Copy Bundle Resources 点击"+"按钮 添加TZImagePickerController.bundle
2. TARGETS -> Build Phases -> Link Binary 点击"+"按钮 添加libRNSyanImagePicker.a

3.安卓是在MainApplication.java里import com.reactlibrary.RNSyanImagePickerPackage;

quality压缩不了图片，反而图片大小变大，如何进行图片的压缩

SYImagePicker.asyncShowImagePicker({enableBase64: true, quality: 90})
.then(photos => {
console.log(photos);
})
.catch(err => {
//
})
这样打印出来的photos的size的值比原图片大小还大，请问怎样进行图片的压缩

和其他库一起使用时会报错 希望得到帮助

配合react-native-fast-image这个库的时候报错

react-native-fast-image 与这个库有冲突。

react-native-fast-image 与这个库有冲突，

安卓选择图片直接提示应用程序错误

rn版本0.52 syab-image-picker版本0.1.0
安卓进入相册选择一张图片后直接提示应用程序错误

Could not resolve all dependencies for configuration ':app:_debugApk'.

FAILURE: Build failed with an exception.

• What went wrong:
  A problem occurred configuring project ':app'.

Could not resolve all dependencies for configuration ':app:_debugApk'.
A problem occurred configuring project ':react-native-syan-image-picker'.
> Could not resolve all dependencies for configuration ':react-native-syan-image-picker:_debugPublishCopy'.
> Could not find com.github.LuckSiege.PictureSelector:picture_library:v2.1.7.
Required by:
Library:react-native-syan-image-picker:unspecified

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.