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文件,在文件中添加如下代码:
<uses-permission android:name="android.permission.CAMERA" />
(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、效果图: