native react 图片多选_react-native实现的多图片选择器

react-native-syan-image-picker

功能介绍

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

原生框架依赖

功能特点

支持 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 文件：

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、在 AndroidManifest.xml 中添加权限：

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:

'一个很牛逼的应用想借用你的摄像头，' +