# React native 网络请求库

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);