一、react-native-image-crop-picker开源库介绍
该库可以实现启动本地相册和照相机来采集图片,并且提供多选、图片裁剪等功能,支持iOS和Android两个平台,不同平台需要分别配置,详细的文字说明见github。
二、集成开源库
npm install react-native-image-crop-picker ---or--- yarn add react-native-image-crop-picker
react-native link react-native-image-crop-picker
三、配置
3.1 iOS平台
(1)声明权限
在Xcode中打开Info.plist,并添加带有值的字符串键 NSPhotoLibraryUsageDescription,描述为什么需要访问用户照片,以及NSCameraUsageDescription 和 NSMicrophoneUsageDescription。
2)添加依赖
Cocapods的用户
1> 在Deployment Info标签下,设置Deployment Target平台版本为:8.0'
2> 将pod'RSKImageCropper'和pod'QBImagePickerController'添加到Podfile
非Cocapods用户
1> 将node_modules / ios / ImageCropPickerSDK文件夹拖放的xcode项目根目录下。
2> 单info选项卡
在Deployment Info标签下,设置Deployment Target平台版本为:8.0
在Target下点击General,选择Embedded Binaries单击+并添加RSKImageCropper.framework和QBImagePicker.framework
3.2 Android平台
(1)Gradle版本必须大于2.2,例如React Native 0.50.1 创建项目,查看工程的build.gradle中默认gradle版本:
buildscript {
...
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
...
}
...
}
(2)打开app下的build.gradle,在android / defaultConfig / 节点下添加useSupportLibrary:
android {
...
defaultConfig {
...
vectorDrawables.useSupportLibrary = true
...
}
...
}
(3)打开android/app/src/main/AndroidManifest.xml配置文件,添加相机权限:
<uses-permission android:name="android.permission.CAMERA"/>
四、使用
4.1 在UI文件中引入
import ImagePicker from 'react-native-image-crop-picker';
4.2 方法
// 从本地相册选择单幅图像
ImagePicker.openPicker({
width: 400,
height: 400,
cropping: true
}).then(image => {
console.log(' 图片路径:'+ image);
});
// 调用多个图像
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});
// 启动相机拍照
ImagePicker.openCamera({
width: 400,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
// 裁剪已有的图片
ImagePicker.openCropper({
path: 'image-file-path.jpg',
width: 400,
height: 400
}).then(image => {
console.log(image);
});
六、效果预览
六、注意
6.1 iOS中,修改组件内的提示语为中文:
第一步 更改语言设置的建议都是在info.plist文件(即项目的info选项)中设置Localization native development region的字段
该字段默认为en即英文,改为china即可将该app内的软件设为中文;
第二步 在项目的PROJECT -> Info -> Localizations中添加语言包才可以