React Native 使用开源库react-native-image-crop-picker实现图片选择、图片剪裁

一、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项目根目录下。

扫描二维码关注公众号，回复： 3478489 查看本文章

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中添加语言包才可以

参考链接：https://www.npmjs.com/package/react-native-image-crop-picker

React Native 使用开源库react-native-image-crop-picker实现图片选择、图片剪裁

猜你喜欢