react-native-android-image-picker
Android照片选取器,支持多张照片选取(支持选择图片的时候拍照),支持直接启动拍照。用户可以方便的看到选择顺序
1、结果演示
2、文件夹说明
- Android文件夹,存放的是多图选择器的Android端代码
- 注:根据产品需求可以对/Android/src/main/res/drawable-xxhdpi下的图片资源进行替换:返回箭头(btn_back.png)、相机图标(default_camera.png)、默认图片(default_image.png)
- Example文件夹,是Android 的demo示例
- images文件夹,存放的是示例演示截图
3、怎么使用?
第一步:运行环境
```省略```
第二步:更新 Gradle Settings
// file:/settings.gradle
...
include ':imagepicker'
project(':imagepicker').projectDir = new File(settingsDir, 'xxxxx/Android')
第三步: 更新 app Gradle
// file:/app/build.gradle
...
dependencies {
...
compile project(':imagepicker')
}
第四步:添加Package
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
...,
new ImagePickerPackage()
);
第五步:在宿主程序中配置Activity
// file:/app/src/main/AndroidManifest.xml
<activity android:name="cn.tuofeng.imagepicker.view.MultiImageSelectorActivity"/>
第六步:在JavaScript中使用
...
var ImagePickerManager = NativeModules.ImagePickerManager;
class choosePhoto extends React.Component {
//返回值保存
state = {
avatarSource: null
};
//选择照片库
selectPhotoFromLibrary() {
//参数设置
const options = {
showCamera:true, //是否显示照相机
maxNumOfSelect: 5, // 照片最大选取数
quality: 1, // 照片压缩率,按照像素压缩
maxWidth: 500, // 最大尺寸宽度
maxHeight: 500, // 最大尺寸高度
listNavigationBarOptions:{ // 缩略图页面,上导航条的设置项
buttonColor:'#5877BF',//完成按钮的背景颜色
indicatorColor:'#5877BF',//数字指示器的背景颜色
backgroundColor:'#3F59AF', // 上导航栏的背景颜色,默认为纯黑色
titleColor:'#FFFFFF' // 设置上导航栏上的字体的颜色,默认是纯白色
},
storageOptions: { // 存储的设置项
path:'savePhotoPath' // 创建存储的文件夹路径,/内存卡/Android/data/packageName/savePhotoPath
},
isCrop:true,//该参数为true时对第一张图片进行头像截取(可不传该参数)
};
ImagePickerManager.selectImage(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('用户取消选择');
}else if (response.error) {
console.log('图片选取错误: ', response.error);
}else {
// 保存回调数据,将选择的第一张图片进行演示
this.setState({
avatarSource: response.results[0]
});
}
});
}
//进行拍照
selectPhotoFromCamera() {
//参数设置
const options = {
quality: 1, // 照片压缩率,按照像素压缩
maxWidth: 500, // 最大尺寸宽度
maxHeight: 500, // 最大尺寸高度
storageOptions: { // 存储的设置项
path:'savePhotoPath2' // 创建存储的文件夹路径,Android.data.packageName.savePhotoPath
}
};
ImagePickerManager.launchCamera(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('用户取消选择');
}else if (response.error) {
console.log('图片选取错误: ', response.error);
}else {
// 保存回调数据,将选择的第一张图片进行演示
this.setState({
avatarSource: response.results[0]
});
}
});
}
userSelect(){
console.log('userSelect');
//调用Android,提示出来选择列表(也可以其他方式)
ImagePickerManager.showImagePicker("这是选择标题","取消选择",["拍照","照片选择"], (response) => {
console.log('Response = ', response);
if (response.error){
console.log('showImagePicker: ', response.error);
return;
}
switch(response.which){
case 0:
this.selectPhotoFromCamera();
break;
case 1:
this.selectPhotoFromLibrary();
break;
default:
console.log('取消');
break;
}
});
}
// 渲染视图
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.selectPhotoFromLibrary.bind(this)}>
<View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
<Text>选择照片</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.selectPhotoFromCamera.bind(this)}>
<View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
<Text>拍照</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.userSelect.bind(this)}>
<View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
<Text>用户自由选择</Text>
</View>
</TouchableOpacity>
<Image style={styles.image} source={this.state.avatarSource}></Image>
</View>
);
}
}
...
4、方法说明:
-
ImagePickerManager --- 管理对外接口的类文件
-
在类中暴露给js三个方法:
-
选择图片
: selectImage(ReadableMap options,Callback callback)
-
启动相机
: launchCamera(ReadableMap options,Callback callback)
-
显示选择框
: showImagePicker(String title, String cancelText,ReadableArray options, Callback callback)
-
参数说明
-
options
: 启动参数(下面会说明)
-
callback
: 是当选择完成之后,将结果放到dic对象中回调给js
-
title
: 对话框标题
-
cancelText
: 对话框取消按钮文字
5、代码中核心类说明
-
PerformCompress
: 批量压缩和保存的处理类
-
MultiImageSelectorActivity
: 照片选择控制界面
-
MultiImageSelectorFragment
: 照片列表展示
-
OptionBean
: 客户端配置封装
6、参数说明
传入参数options
参数 |
类型 |
描述 |
showCamera |
bool |
是否在照片列表中显示照相机 |
maxNumOfSelect |
number |
照片的最大选取个数 |
quality |
number |
像素压缩率 |
maxWidth |
number |
返回图片的最大宽度 |
maxHeight |
number |
返回图片的最大高度 |
listNavigationBarOptions |
object |
列表页面相关设置 |
storageOptions |
object |
存储设置项 |
listNavigationBarOptions
参数 |
类型 |
描述 |
buttonColor |
string |
ActionBar上面提交按钮的颜色,默认'#36AF00' |
indicatorColor |
string |
照片选择指示器,默认'#36AF00' |
backgroundColor |
string |
上导航条的背景颜色,默认'#000000'纯黑色 |
titleColor |
string |
上导航条上标题颜色,默认'#FFFFFF'白色 |
storageOptions
参数 |
类型 |
描述 |
path |
string |
创建存储的文件夹路径;如:savePhotoPath,如果有内存卡:/内存卡/Android/data/packageName/savePhotoPath;没有内存卡的话存在应用目录对应的目录 |
返回参数response
参数 |
类型 |
描述 |
error |
string |
图片选取错误信息,当有错误时才返回 |
didCancel |
bool |
用户取消照片选取,当用户取消选择照片时返回true |
denied |
bool |
没有照相机或者内存卡写入权限 |
numOfSelect |
number |
返回选择的照片个数,当正确选择照片后返回 |
results |
object |
返回的照片信息集,当正确选择完照片后返回 |
results
参数 |
类型 |
描述 |
uri |
string |
照片存在本地的路径 |
width |
number |
照片宽度 |
height |
number |
照片高度 |
fileSize |
string |
图片大小(字节) |
exif |
object |
数码照片的信息 |
exif 数码照片的信息,具体参数说明如下:
参数 |
类型 |
描述 |
DPIWidth |
number |
水平方向每个分辨率单元的像素数 |
DPIHeight |
number |
垂直方向每个分辨率单元的像素数 |
Make |
string |
设备制造商 |
Model |
string |
设备型号 |
DateTimeOriginal |
string |
照片的拍摄时间, 格式为2016-07-06 18:54:10 |
LensMake |
string |
镜头制造商 |
LensModel |
string |
镜头型号 |
Altitude |
string |
海拔高度 |
Latitude |
string |
纬度 |
LatitudeRef |
string |
纬度类型,北纬'N'、南纬'S' |
Longitude |
string |
经度 |
LongitudeRef |
string |
经度类型,东经'E'、西经'W' |
Orientation |
number |
照片朝向,值是数字,1表示朝上 |
PixelWidth |
number |
水平方向像素点 |
PixelHeight |
number |
垂直方向像素点 |
Orientation表示图片的朝向,具体值如下:
ORIENTATION_UNDEFINED = 0;
ORIENTATION_NORMAL = 1;
ORIENTATION_FLIP_HORIZONTAL = 2; // left right reversed mirror
ORIENTATION_ROTATE_180 = 3;
ORIENTATION_FLIP_VERTICAL = 4; // upside down mirror
ORIENTATION_TRANSPOSE = 5; // flipped about top-left <--> bottom-right axis
ORIENTATION_ROTATE_90 = 6; // rotate 90 cw to right it
ORIENTATION_TRANSVERSE = 7; // flipped about top-right <--> bottom-left axis
ORIENTATION_ROTATE_270 = 8; // rotate 270 to right it