之前用的是react-native-image-picker游桩，但是當(dāng)往服務(wù)器端傳的時(shí)候才發(fā)現(xiàn)羹铅，因?yàn)闆](méi)有圖片裁切香缺，所以圖片過(guò)大，無(wú)法保存苫幢，所以只好更換成react-native-image-crop-picker访诱。
react-native-image-crop-picker 不像 react-native-image-picker 直接就有彈出框，然后根據(jù)選擇跳入到相應(yīng)的相機(jī)或相冊(cè)中韩肝，所以需要我們自定義彈出框触菜，這里使用的是 modal。
react-native-image-crop-picker 的導(dǎo)入及配置這里就不說(shuō)了哀峻，可以參考github上：
https://github.com/ivpusic/react-native-image-crop-picker
1涡相、自定義彈出框（modal）
react native 提供的 Alert 局限性較大，沒(méi)有辦法自定義剩蟀，所以我這里選擇用 Modal 來(lái)實(shí)現(xiàn)催蝗。
簡(jiǎn)單了解：Modal組件可以用來(lái)覆蓋包含 react native 根視圖的原生視圖，在嵌入 react native 的混合應(yīng)用中可以使用 modal育特，modal 可以使你應(yīng)用中 RN 編寫的那部分內(nèi)容覆蓋在原生視圖上顯示丙号。
常見屬性：
visible // 是否可見 false／true
animationType // 動(dòng)畫 none：無(wú)／slide：從底部／fade:淡入淡出
transparent = {true} // 是否默認(rèn)半透明
onRequestClose={()=> this.onRequestClose()} // 彈出框關(guān)閉回調(diào)
<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}>請(qǐng)選擇</Text>
<TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._openCamera}>
<Text style={styles.modalItem}>打開相機(jī)</Text>
</TouchableHighlight>
<TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._openPicker}>
<Text style={styles.modalItem}>打開相冊(cè)</Text>
</TouchableHighlight>
<TouchableHighlight underlayColor={'#F5F5F5'} onPress={this._closeModal}>
<Text style={styles.modalItem}>取消</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
用 state 中 modalVisible 的狀態(tài)來(lái)管理彈出框的顯示與關(guān)閉。
style樣式：
alertBackground:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'rgba(0, 0, 0, 0.5)’, // 如果要遮罩要顯示成半透明狀態(tài)，這里一定要設(shè)置犬缨，reba中的a控制透明度喳魏，取值在 0.0 ～ 1.0 范圍內(nèi)。
},
alertBox: {
width:200,
height:175,
backgroundColor:'white',
},
_openCamera： // 調(diào)用相機(jī)遍尺，這里就要用到 react-native-image-crop-picker 了截酷，所以記得 import 它涮拗。
// 是一個(gè)異步加載乾戏，當(dāng)正確是返回 image ，這里面就是我們需要的圖片信息三热。
ImagePicker.openCamera({
width:300,
height:400,
cropping:true
}).then(image => {
let source = {uri: image.path};
this._fetchImage(image);
this.setState({
avatarSource: source // 將圖片存于本地
});
});
_openPicker： // 調(diào)用相冊(cè)
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 中這三個(gè)元素缺一不可偎漫。 type 必須為 multipart/form-data。
let formData = new FormData();
formData.append('file', file); // 這里的 file 要與后臺(tái)名字對(duì)應(yīng)有缆。
fetch(url,{
method:'POST',
headers:{
'Content-Type':'multipart/form-data',
},
body:formData,
}).then(function (response) {
console.log("response",response);
return response.json();
})
}
