图片选择器。
- Android
基于PictureSelector修改 - iOS
基于TZImagePickerController修改
yarn add react-native-kpframework-image-picker
react-native link react-native-kpframework-image-picker
android
Gradle >= 3.1.4 (android/build.gradle)
Android SDK >= 26 (android/app/build.gradle)
build.gradle 修改
- 在 build.gradle 的 buildscript 添加
maven { url 'https://jitpack.io' }
-
minSdkVersion 最低支持版本 19
-
如果使用了Glide库，请升级到 v4
-
支持 androidx，如果您的项目还没有支持 androidx，请先支持 androidx
iOS
- Cocoapods(推荐)
修改 Podfile 文件，如下:
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
target 'Template' do
# Pods for Demo61
pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/'
pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
# 0.6x版本不需要添加
# pod 'react-native-kpframework-image-picker', :podspec => '../node_modules/react-native/react-native-kpframework-image-picker/react-native-kpframework-image-picker.podspec'
use_native_modules!
end
install! 'cocoapods', :deterministic_uuids => false执行 pod install
- 手动安装
Click on project General tab
Under Deployment Info set Deployment Target to 9.0
Under Embedded Binaries click + and add react-native-kpframework-image-picker.framework
import KPImagePicker from 'react-native-kpframework-image-picker';
...
KPImagePicker.openPicker().then(value => {
}).catch(error => {
});- openPicker(options);
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| mediaType | string | 'any' | 选择的文件类型photo video any
|
| multiple | bool | false | 是否支持多选 |
| maxFiles | number | 9 | 最多选择的文件数(多选时生效) |
| minFiles | number | 1 | 最少选择的文件数(多选时生效) |
| compressImageMaxWidth(ios) | number | 600(px) | 图片文件压缩大小(根据宽度按比例压缩)如果选择原图，则不会裁剪和压缩 |
| compressImageQuality | number | 0.8 | 图片文件压缩质量 |
| compressVideoPreset(ios) | string | 'MediumQuality' | 视频文件压缩质量 640x480 960x540 1280x720 1920x1080 LowQuality MediumQuality HighestQuality Passthrough
|
| includeBase64 | bool | false | 返回图片 data 的 base64 值 |
| includeExif | bool | false | 返回 image exif 信息 |
| cropping | bool | false | 裁剪功能开关 |
| cropWidth | number | 400(px) | 裁剪图片宽(如果超过原图高宽，则无效)度 |
| cropHeight | number | 400(px) | 裁剪图片高(如果超过原图高宽，则无效)度 |
| cropperCircleOverlay | bool | false | 圆形裁剪框 |
| cropRadius(ios) | number | 200(px) | 圆形裁剪图片半径 |
| writeTempFile(ios) | bool | true | 裁剪、压缩时生成临时文件 |
| showCamera | bool | true | 是否在相册中支持拍照功能 |
- 返回结果需要统一数组还是单个对象
- android 端集成