2022-03-02 关于 react-native 如何使用 react-native-image-crop-picker

前言:react-native项目(下称rn)中需要用到图片裁剪、从相册取照片以及调用手机相机,主要用到这个插件react-native-image-crop-picker。

安装:

yarn add react-native-image-crop-picker

插件地址:https://github.com/ivpusic/react-native-image-crop-picker

安装好后,需要对android包进行配置,否则会报错:TypeError: null is not an object (evaluating 'ImageCropPicker.openPicker')

配置步骤如下:

1.link到android库里:

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

2.打开相机权限(需要用到相机的时候),在项目名\android\app\src\main\AndroidManifest.xml里添加下面代码:

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

3.卸载原来的app,重新打包。

====================================  下面是使用方法  ====================================

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

···
ImagePicker.openPicker({
            width: 100,//宽度
            height: 100,//高度
            cropping: true,//是否裁剪
            cropperCircleOverlay: true,//裁剪图像时候,是否打开圆形裁剪覆盖
            includeBase64: false,//启用或禁用使用图像返回base64数据
}).then(async image => {
            let path = image.path;
            console.log('图片路径: '+path)
}).catch(err => {
            console.log(err);
})

这里只对android进行配置,ios的。。可以参看这篇文章:https://www.jianshu.com/p/8420b08062c7

posted @ 2023-03-02 11:38  叶乘风  阅读(190)  评论(0编辑  收藏  举报