@tuofeng/react-native-image-picker

0.0.51 • Public • Published

react-native-android-image-picker

Android照片选取器,支持多张照片选取(支持选择图片的时候拍照),支持直接启动拍照。用户可以方便的看到选择顺序 1、结果演示

  • 截图

选择

  • 动画演示

动画

2、文件夹说明

  1. Android文件夹,存放的是多图选择器的Android端代码
    • 注:根据产品需求可以对/Android/src/main/res/drawable-xxhdpi下的图片资源进行替换:返回箭头(btn_back.png)、相机图标(default_camera.png)、默认图片(default_image.png)
  2. Example文件夹,是Android 的demo示例
  3. 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、方法说明:

  1. ImagePickerManager --- 管理对外接口的类文件

  2. 在类中暴露给js三个方法:

    • 选择图片: selectImage(ReadableMap options,Callback callback)
    • 启动相机: launchCamera(ReadableMap options,Callback callback)
    • 显示选择框: showImagePicker(String title, String cancelText,ReadableArray options, Callback callback)
  3. 参数说明

    • options: 启动参数(下面会说明)
    • callback: 是当选择完成之后,将结果放到dic对象中回调给js
    • title: 对话框标题
    • cancelText: 对话框取消按钮文字

5、代码中核心类说明

  1. PerformCompress: 批量压缩和保存的处理类
  2. MultiImageSelectorActivity: 照片选择控制界面
  3. MultiImageSelectorFragment: 照片列表展示
  4. 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

Package Sidebar

Install

npm i @tuofeng/react-native-image-picker

Weekly Downloads

4

Version

0.0.51

License

none

Unpacked Size

15.9 MB

Total Files

177

Last publish

Collaborators

  • iwater