React|React Native 学习第六天
React Native开源库react-native-image-crop-picker使用图解 前言
React Native开发中我们会遇到修改头像、上传图片的问题，React Native是跨平台语言，需要兼容IOS和Android，自己去写会很麻烦，
所以我跟大家分享一个第三方开源库：“react-native-image-crop-picker”。
【React|React Native 学习第六天】react-native-image-crop-picker
导入
...
npm i react-native-image-crop-picker --save
react-native link react-native-image-crop-picker
...
基础使用
...
import ImagePicker from 'react-native-image-crop-picker';
export class CameraUtils extends Component{
constructor(props){
super(props);
this.state = {
imageUrl:require('xxx.png'),
path:''
}
}render(){
return(
)
}//调用相册 单张图片
onHandlePicker(){
//从相册中选择单张图片、cropping是否切割
ImagePicker.openPicker({
width:300,
height:300,
cropping:true
}).then(image=>{
console.log('图片路径：'+image['path']);
console.log('图片base64格式数据流：'+image['data']);
console.log('图片格式：'+image['mime']);
console.log('图片宽度：'+image['width']);
console.log('图片高度：'+image['height']);
console.log('图片大小：'+image['size']);
this.setState({
path:image['path'],
imageUrl:{uri:image['path']}
})
})
}//调用相机
onHandleCamera(){
ImagePicker.openCamera({
width:300,
height:300,
cropping:true
}).then(image=>{
...
})
}//裁剪已有的图片
onHandleScreenShot(){
ImagePicker.openCropper({
path:this.state.path,//图片路径
width:300,
height:300
}).then(image =>{
...
})
}//调用相册 多张图片
onHandlePickers(){
ImagePicker.openPicker({
multiple:true
}).then(images=>{
console.log('图片数量：'+images.length);
})
}
}
...
报错解决
如果报错提示：...com.android.support:appcompat-v7:27.1.0...
第一步：项目根目录/android/build.gradle
...
allprojects{
repositories{
...
//添加
maven{url 'https://maven.google.com'}maven{url "https://jitpack.io"}
}
}
第二步：项目根目录/android/app/build.gradle
...
android{
compileSdkVersion 27
buildToolsVersion "27.0.3"defaultConfig{
...
minSdkVersion 17
targetSdkVersion 27
vectorDrawables.useSupportLibrary = true
...
}
...
}
推荐阅读
- 由浅入深理解AOP
- 继续努力，自主学习家庭Day135(20181015）
- python学习之|python学习之 实现QQ自动发送消息
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习
- 【韩语学习】（韩语随堂笔记整理）
- 焦点学习田源分享第267天《来访》