React native 网络请求以及弹窗
2020年1月14日
rn-fetch-blob
react-native-fetch-blob
rn-fetch-blob是react-native-fetch-blob的fork分支,建议使用这个
npmjs 查看 rn-fetch-blob
安装:npm install --save rn-fetch-blob
pod : react-native link rn-fetch-blob
使用 : import RNFetchBlob from 'rn-fetch-blob';
import HUD, { LoadingHUD } from "react-native-hud-hybrid";
//上传图片示例
selectPhotoTapped(wordid,word) {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: { skipBackup: true },
title: "选择照片",
takePhotoButtonTitle: "打开相机",
chooseFromLibraryButtonTitle: "从相册中选取",
mediaType: "photo",
cancelButtonTitle: "取消"
};
// showImagePicker
ImagePicker.showImagePicker(options, response => {
console.log("Response = ", response);
if (response.didCancel) {
console.log("User cancelled photo picker");
} else if (response.error) {
console.log("ImagePicker Error: ", response.error);
} else if (response.customButton) {
console.log("User tapped custom button: ", response.customButton);
} else {
let source = { uri: response.uri };
//头部请求
let headers = {
"Content-Type": "application/json;charset=UTF-8",
'apiAuth':String(apiauth),
"uid": String(userid),
"username": String(nicakname),
};
//body请求
let body = [
{ name : 'uid', data:userid },
{ name : 'data', data:data },
{ name : 'file', filename :response.fileName, type:'image/png',data: response.data},
];
let url = util.common_url + "api/upload";
console.log(url);
//loading show
this.loadingHUD.show();
RNFetchBlob.fetch('POST', url,headers, body)
.uploadProgress({ interval : 100 },(written, total) => {
// listen to upload progress event
console.log('uploaded', written / total);
this.setState({ uploadProgress: written/total});
})
.then((res) => {
let result = res.json();
this.setState({ uploadProgress: 1});
if (1 == result.code) {
console.log("api/upload successed");
console.log(result.data);
}
else{
console.log("api/upload error");
}
//loading hide
this.loadingHUD.hideAll();
HUD.info(result.msg);
//签名验证错误
if (-100 == result.code)
{
//发监听
DeviceEventEmitter.emit("apiAutherror",'apiAutherror');
}
})
.catch((err) => {
console.log("api/upload catch err");
//loading hide
this.loadingHUD.hideAll();
})
this.setState({ avatarSource: source });
}
});
}
react-native-toast-hybrid
react-native-toast-hybrid
this.loadingHUD = new LoadingHUD();
//loading show
this.loadingHUD.show();
//loading hide
this.loadingHUD.hideAll();
//弹窗
HUD.info(result.msg);