react-native-image-crop-picker 图片选择上传组件

react-native-image-crop-picker 图片选择上传组件

1、组件描述：
react-native-image-crop-picker是基于react native的一款图片选择上传组件，调用手机拍照和相册。详细使用方法参考地址：
（1）npm 组件地址
2、组件使用：
（1）先安装react-native-image-crop-picker
$ npm install react-native-image-crop-picker --save
（2）在项目中集成react-native-image-crop-picker
$ react-native link react-native-image-crop-picker
（3）导入react-native-image-crop-picker
import ImagePicker from ‘react-native-image-crop-picker’;
（4）使用ImagePicker

ImagePicker.openPicker({
    width: 100,//宽度
    height: 100,//高度
    cropping: true,//是否裁剪
    cropperCircleOverlay:true,//裁剪图像时候，是否打开圆形裁剪覆盖
    includeBase64:true,//启用或禁用使用图像返回base64数据
}).then(image=>{
    let path = image.path;
    let filename = path.substring(path.lastIndexOf('/') + 1, path.length);
    let file = {
        uri: image.path,
        type: 'multipart/form-data',
        name: filename,
        size: image.size
    };
    RequestData.postAppData(AppDotUrls+'/index.php?app=user&mod=image_upload',{
        'key':loginToken,
        'file':file
    })
    .then(result=>{
        if(result.code=='200'){
            this.setState({
                member_avatar:result.data.thumb_name,
            })
            ViewUtils.appddToastTip(result.msg)
        }else{
            ViewUtils.appddToastTip(result.msg)
        }
    })
    .catch(error=>{
        ViewUtils.appddToastTip(error)
    })
})

3、react-native-image-crop-picker在Android系统 下项目环境配置：

（1）先在项目中添加相机权限，在项目目录appdd\android\app\src\main下找到AndroidManifest.xml文件，在文件中添加如下代码：
     

（2）查看集成后，项目文件中有没有对应添加上图片选择模块
    [1]查看项目目录appdd\android下的settings.gradle文件中是否有react-native-image-crop-picker模块

    [2]查看项目目录appdd\android下的build.gradle文件中添加如下代码：maven { url "https://jitpack.io" }，如下图所示

    [3]查看项目目录appdd\android\app\src\main\java\com\itdiandian\app下的MainApplication.java文件中是否有react-native-image-crop-picker模块，一般集成后都会有，如果没有就添加上

    [4]查看项目目录appdd\android\app下的build.gradle文件中是否有react-native-image-crop-picker模块，一般集成后都会有，如果没有就添加上

（3）如果没问题后，就可以重新运行命令react-native run-android，安装到手机即可使用    

4、react-native-image-crop-picker组件属性及方法：

5、效果图：