React-Native 多图片选择 支持裁剪 压缩
npm install react-native-msyan-image-picker
基于已有原生第三方框架封装的多图片选择组件，适用于 React Native App。
// 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
$3
#### iOS
##### 1、添加原生框架中所需的 文件：- 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)
#### Android
##### 1、在
中添加 maven { url "https://jitpack.io" } 和Google 配置：
`gradle
buildscript {
repositories {
jcenter()
maven {
url 'https://maven.google.com/'
name 'Google'
}
google()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.0' // NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url "https://jitpack.io" }
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
`##### 2、在
中添加权限：
`xml
`##### 3、更新到 PictureSelector 2.2.0 需要修改：
gradle
// app/build.gradleandroid {
compileSdkVersion 26
buildToolsVersion "26.0.3"
...
}
`##### 4、拍照前动态获取权限
js
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);
}
};
`
$3
1. 检查自动 link 是否成功
2. 使用 Android Studio 查看 文件是否添加 new RNSyanImagePickerPackage()
3. 使用 Android Studio 打开项目检查 Gradle 是否同步完成
4. 可以运行 ImagePickerExample 该 Demo，测试 Android 7.0，6.0 拍照选图都为正常link失败手动添加
$3
1. In XCode, in the project navigator, right click
➜ Add Files to [your project's name]
2. Go to ➜ react-native-syan-image-picker and add RNSyanImagePicker.xcodeproj
3. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project ()<$3
1. Open up
android/app/src/main/java/[...]/MainApplication.java - Add
to the imports at the top of the file
- Add new RNSyanImagePickerPackage() to the list returned by the getPackages() method2. Append the following lines to
android/settings.gradle:
`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
:
`gradle
compile project(':react-native-syan-image-picker')
`运行示例
相关 Demo 见 ImagePickerExample。
配置参数说明
组件调用时，支持传入一个 对象，可设置的属性如下：属性名 | 类型 | 是否可选 | 默认值 | 描述
---------------- | ------ | -------- | ----------- | -----------
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 | 是否隐藏裁剪区域网格
quality | int | 是 | 90 | 压缩质量(安卓无效，固定鲁班压缩)
minimumCompressSize | int | 是 | 100 | 小于100kb的图片不压缩（Android）
enableBase64 | bool | 是 | false | 是否返回base64编码，默认不返回
freeStyleCropEnabled | bool | 是 | false | 裁剪框是否可拖拽（Android）
rotateEnabled | bool | 是 | true | 裁剪是否可旋转图片（Android）
scaleEnabled | bool | 是 | true | 裁剪是否可放大缩小图片（Android）
返回结果说明
以 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 | 图片大小，单位为字节
base64 | string | 图片的 base64 编码，如果 设置 false，则不返回该属性方法调用
$3
回调形式需调用 showImagePicker 方法：`javascript
import SyanImagePicker from 'react-native-syan-image-picker';SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {
if (err) {
// 取消选择
return;
}
// 选择成功，渲染图片
// ...
})
`
$3
非回调形式则使用 方法：`javascript
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为"取消"
}
}
`
$3
在 React Native 页面移除选中的图片后，需调用 方法，来删除原生中保存的图片数组，确保下次进入图片选择时，已选中的图片保持一致：
`javascript
handleDeletePhoto = index => {
const { selectedPhotos: oldPhotos } = this.state;
const selectedPhotos = oldPhotos.filter((photo, photoIndex) => photoIndex !== index);
// 更新原生图片数组
SYImagePicker.removePhotoAtIndex(index);
// 更新 RN 页面
this.setState({ selectedPhotos });
}
`$3
javascript
STImagePicke.removeAllPhoto()
`$3
相机功能调用方法，一样支持 Callback 和 Promise 两种形式，结果参数也保持一致。
javascript
//Callback方式
SyanImagePicker.openCamera(options, (err, photos) => {
if (err) {
// 取消选择
return;
}
// 选择成功，渲染图片
// ...
})//Promise方式
SYImagePicker.asyncOpenCamera(options)
.then(()=>{
...
})
.catch(()=>{
...
})
`$3
javascript
SYImagePicker.deleteCache();
``