react-native-kpframework-image-picker-updated

react-native-kpframework-image-picker

图片选择器。

原生库

• Android
  基于PictureSelector修改
• iOS
  基于TZImagePickerController修改

安装方式

第一步: 添加库

yarn add react-native-kpframework-image-picker

第二步: 链接原生 (rn 0.6x 以上版本略过)

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 修改

1. 在 build.gradle 的 buildscript 添加

maven { url 'https://jitpack.io' }

1. minSdkVersion 最低支持版本 19

2. 如果使用了Glide库，请升级到 v4

3. 支持 androidx，如果您的项目还没有支持 androidx，请先支持 androidx

iOS

1. 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

1. 手动安装
   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 => {

});

API

• openPicker(options);

1. 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	是否在相册中支持拍照功能

4. 其他说明

5. 注意事项

TODO

• 返回结果需要统一数组还是单个对象
• android 端集成