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、添加相册相关权限：

 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版本

注意安装运行报错

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

link失败手动添加（<0.60）

iOS

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

Android

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

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')

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-image-picker-syan

react-native-syan-image-picker

功能介绍

原生框架依赖

功能特点

Live

安装使用

安装

其他配置

iOS

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

2、添加相册相关权限：

3、中文适配：

4、更新TZImagePickerController版本

Android

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

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

3、拍照前动态获取权限

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

注意安装运行报错

link失败手动添加（<0.60）

iOS

Android

配置参数说明

返回结果说明

方法调用

Callback

Promise

移除选中图片

移除全部选中图片

调用相机

选择视频

删除缓存

版本记录

帮助

非常感谢

捐赠

Dependents (0)

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

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

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

Weekly Downloads