之前用的是react-native-image-picker,但是当往服务器端传的时候才发现,因为没有图片裁切,所以图片过大,无法保存,所以只好更换成react-native-image-crop-picker。
react-native-image-crop-picker 不像 react-native-image-picker 直接就有弹出框,然后根据选择跳入到相应的相机或相册中,所以需要我们自定义弹出框,这里使用的是 modal。
react-native-image-crop-picker 的导入及配置这里就不说了,可以参考github上:
https://github.com/ivpusic/react-native-image-crop-picker
1、自定义弹出框(modal)
react native 提供的 Alert 局限性较大,没有办法自定义,所以我这里选择用 Modal 来实现。
简单了解:Modal组件可以用来覆盖包含 react native 根视图的原生视图,在嵌入 react native 的混合应用中可以使用 modal,modal 可以使你应用中 RN 编写的那部分内容覆盖在原生视图上显示。
常见属性:
visible // 是否可见 false/true
animationType // 动画 none:无/slide:从底部/fade:淡入淡出
transparent = {true} // 是否默认半透明
onRequestClose={()=> this.onRequestClose()} // 弹出框关闭回调
visible={this.state.modalVisible}
animationType={'fade'}
transparent = {true}
onRequestClose={()=> this.onRequestClose()}
>
请选择
打开相机
打开相册
取消
用 state 中 modalVisible 的状态来管理弹出框的显示与关闭。
style样式:
alertBackground:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'rgba(0, 0, 0, 0.5)’, // 如果要遮罩要显示成半透明状态,这里一定要设置,reba中的a控制透明度,取值在 0.0 ~ 1.0 范围内。
},
alertBox: {
width:200,
height:175,
backgroundColor:'white',
},
_openCamera: // 调用相机,这里就要用到 react-native-image-crop-picker 了,所以记得 import 它。
// 是一个异步加载,当正确是返回 image ,这里面就是我们需要的图片信息。
ImagePicker.openCamera({
width:300,
height:400,
cropping:true
}).then(image => {
let source = {uri: image.path};
this._fetchImage(image);
this.setState({
avatarSource: source // 将图片存于本地
});
});
_openPicker: // 调用相册
ImagePicker.openPicker({
width:300,
height:400,
cropping: true
}).then(image => {
let source = {uri: image.path};
this._fetchImage(image);
this.setState({
avatarSource: source
});
});
将图片文件上传:
_fetchImage(image) {
let url = “http:。。。。。。。。”; // 接口地址
let file = {uri: image.path, type: 'multipart/form-data', name:’image.png' } ; // file 中这三个元素缺一不可。 type 必须为 multipart/form-data。
let formData = new FormData();
formData.append('file', file); // 这里的 file 要与后台名字对应。
fetch(url,{
method:'POST',
headers:{
'Content-Type':'multipart/form-data',
},
body:formData,
}).then(function (response) {
console.log("response",response);
return response.json();
})
}