[RN] React Native 使用开源库 react-native-image-crop-picker

发布时间：2020-12-15 16:20:46 所属栏目：百科来源：网络整理

导读：React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁该库可以实现启动本地相册和照相机来采集图片，并且提供多

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

该库可以实现启动本地相册和照相机来采集图片，并且提供多选、图片裁剪等功能，支持iOS和Android两个平台，不同平台需要分别配置，详细的文字说明见github。

一、安装

npm install react-native-image-crop-picker -S

react-native link react-native-image-crop-picker

二、配置

1）Android

a、Gradle版本必须大于2.2

b、打开app下的build.gradle，在android / defaultConfig / 节点下添加useSupportLibrary

android {  
    ...  
    defaultConfig {  
        ...  
        vectorDrawables.useSupportLibrary = true  
        ...  
    }  
    ...  
}

c、打开android/app/src/main/AndroidManifest.xml配置文件，添加权限：

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

d、settings.gradle 添加? （如已被 link 添加，则可跳过）

include ‘:react-native-image-crop-picker‘
project(‘:react-native-image-crop-picker‘).projectDir = new File(rootProject.projectDir,‘../node_modules/react-native-image-crop-picker/android‘)

e、MainApplication? 中添加 ? （如已被 link 添加，则可跳过）

import com.reactnative.ivpusic.imagepicker.PickerPackage;




******

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),new ReactVideoPackage(),new OrientationPackage(),new VectorIconsPackage(),new PickerPackage()
      );
    }

******

2）IOS

由于笔者暂时是在Android下开发，后续在IOS中实践通过，再补充！

三、使用

1）引用

import ImagePicker from ‘react-native-image-crop-picker‘;

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,cropping: true  
    }).then(image => {  
      console.log(image);  
    }); 
     
    // 裁剪已有的图片
    ImagePicker.openCropper({  
      path: ‘image-file-path.jpg‘,width: 400,height: 400  
    }).then(image => {  
      console.log(image);  
    });

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10960484.html

转载请著名出处！谢谢~~

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!