Gathering detailed insights and metrics for @laserpecker/react-native-syan-image-picker
Gathering detailed insights and metrics for @laserpecker/react-native-syan-image-picker
Installations
npm install @laserpecker/react-native-syan-image-pickerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.14.0
NPM Version
8.3.1
Score
73.5
Supply Chain
98.5
Quality
75.2
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
5
Java
Objective-C
JavaScript
Ruby
Starlark
Java (43.43%)
Objective-C (39.8%)
JavaScript (14.36%)
Ruby (1.73%)
Starlark (0.68%)
Developer
LaserPeckerIst
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
135 Commits
10 Branches
Updated on Dec 18, 2022
Maintainers
1
Package Meta Information
Latest Version
0.5.3
Package Id
@laserpecker/react-native-syan-image-picker@0.5.3
Unpacked Size
113.75 kB
Size
26.58 kB
File Count
29
NPM Version
8.3.1
Node Version
16.14.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
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 中添加权限：
1<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 2<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 3<uses-permission android:name="android.permission.CAMERA" />
2、更新到 PictureSelector需要修改minSdkVersion：
1// app/build.gradle 2 3android { 4 minSdkVersion = 19 5 ... 6}
3、拍照前动态获取权限
1requestPermission = async () => { 2 try { 3 const granted = await PermissionsAndroid.request( 4 PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, 5 { 6 title: '申请读写手机存储权限', 7 message: 8 '一个很牛逼的应用想借用你的摄像头，' + 9 '然后你就可以拍出酷炫的皂片啦。', 10 buttonNeutral: '等会再问我', 11 buttonNegative: '不行', 12 buttonPositive: '好吧', 13 }, 14 ); 15 if (granted === PermissionsAndroid.RESULTS.GRANTED) { 16 console.log('现在你获得摄像头权限了'); 17 } else { 18 console.log('用户并不给你'); 19 } 20 } catch (err) { 21 console.warn(err); 22 } 23 };
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
注意安装运行报错
- 检查自动 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-pickerand addRNSyanImagePicker.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNSyanImagePicker.ato your project'sBuild 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 thegetPackages()method
-
Append the following lines to
android/settings.gradle:1include ':react-native-syan-image-picker' 2project(':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:1 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 方法：
1import SyanImagePicker from 'react-native-syan-image-picker'; 2 3SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => { 4 if (err) { 5 // 取消选择 6 return; 7 } 8 // 选择成功，渲染图片 9 // ... 10})
Promise
非回调形式则使用 asyncShowImagePicker 方法：
1import SyanImagePicker from 'react-native-syan-image-picker'; 2 3// promise-then 4SYImagePicker.asyncShowImagePicker(options) 5 .then(photos => { 6 // 选择成功 7 }) 8 .catch(err => { 9 // 取消选择，err.message为"取消" 10 }) 11 12// async/await 13handleSelectPhoto = async () => { 14 try { 15 const photos = await SYImagePicker.asyncShowImagePicker(options); 16 // 选择成功 17 } catch (err) { 18 // 取消选择，err.message为"取消" 19 } 20}
移除选中图片
在 React Native 页面移除选中的图片后，需调用 removePhotoAtIndex 方法，来删除原生中保存的图片数组，确保下次进入图片选择时，已选中的图片保持一致：
1handleDeletePhoto = index => { 2 const { selectedPhotos: oldPhotos } = this.state; 3 const selectedPhotos = oldPhotos.filter((photo, photoIndex) => photoIndex !== index); 4 // 更新原生图片数组 5 SYImagePicker.removePhotoAtIndex(index); 6 // 更新 RN 页面 7 this.setState({ selectedPhotos }); 8}
移除全部选中图片
1STImagePicke.removeAllPhoto()
调用相机
相机功能调用方法，一样支持 Callback 和 Promise 两种形式，结果参数也保持一致。
1 //Callback方式 2SyanImagePicker.openCamera(options, (err, photos) => { 3 if (err) { 4 // 取消选择 5 return; 6 } 7 // 选择成功，渲染图片 8 // ... 9}) 10 11//Promise方式 12 SYImagePicker.asyncOpenCamera(options) 13 .then(()=>{ 14 ... 15 }) 16 .catch(()=>{ 17 ... 18 })
选择视频
1SyanImagePicker.openVideoPicker(options, (err, videos) => { 2 if (err) { 3 // 取消选择 4 return; 5 } 6 // 选择成功，处理视频 7 // ... 8})
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 返回结果：
1{ 2 mime: "video/mp4", 3 type: "video", 4 height: 1080, 5 width: 1920, 6 duration: 30.22, 7 size: 63876724, 8 fileName: "VID_20200409_11492864.mp4", 9 uri: "file:///storage/emulated/0/DCIM/Camera/VID_20200409_11492864.mp4", 10 coverUri: "file:///storage/emulated/0/Android/data/package_id/cache/thumb-c3c99b6a.jpg" 11}
注：uri 包含协议 "file://"
删除缓存
1SYImagePicker.deleteCache();
版本记录
- 0.4.10 新增showSelectedIndex参数，是否显示选中序号
帮助
加入 React-Native QQ群 397885169
非常感谢
捐赠
随时欢迎！！☕️☕️☕️✨✨
No vulnerabilities found.
No security vulnerabilities found.