之前用的是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()} // 彈出框關閉回調
<View >
<Modal
visible={this.state.modalVisible}
animationType={'fade'}
transparent = {true}
onRequestClose={()=> this.onRequestClose()}
>
<View style={styles.alertBackground}>
<View style={styles.alertBox}>
<Text style={styles.modalTitle}>請選擇</Text>
<TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._openCamera}>
<Text style={styles.modalItem}>打開相機</Text>
</TouchableHighlight>
<TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._openPicker}>
<Text style={styles.modalItem}>打開相冊</Text>
</TouchableHighlight>
<TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._closeModal}>
<Text style={styles.modalItem}>取消</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
用 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();
})
}