Hi,欢迎来到华清远见移动互联网学院官网!国内王牌JAVAEE培训、Android培训、Python培训、HTML5培训、UI培训、JAVA培训、VR培训机构!

  • 400-611-6270
  • 新浪微博
  • 微信
您当前的位置:移动互联网学院 > Android开发 > Android开发教程:React-Native 网络请求和监控

Android开发教程:React-Native 网络请求和监控

时间:2017-03-29 16:44 来源:Android开发学习网

今天要和大家分享的Android开发教程是React-Native 网络请求和监控。

(一) 网络监控

我们用NetInfo模块来监听网络状态

添加监听

设置两个属性用来记录状态值

constructor(props){

super(props);

this.state = {

isConnected:null,

connectInfo:'',

};

};

NetInfo.isConnected.addEventListener(eventName, handler) 在网络端口或者链接是调用监听函数

NetInfo.addEventListener(eventName, handler) 在网络状况/类型发生变化时调用此监听函数。回调的参数为上面列出的网络状况/类型。 eventName:监听事件名称 handl调函数

componentDidMount() {

//添加网络是否连接的监听者

NetInfo.isConnected.addEventListener('isConnected', this._handleNetStatus);

//添加网络状态变化的监听者

NetInfo.addEventListener('statusChange', this._handleNetChange);

//检查网络状态

NetInfo.isConnected.fetch().done(

(isConnected) => {

this.setState({isConnected:isConnected});

}

);

//检查网络类型

NetInfo.fetch().done( (netType) => {

this.setState({

connectInfo:netType

});

});

};

移除网监听

在componentWillUnmount()方法中移除监听

removeEventListener(eventName, handler)

NetInfo.isConnected.removeEventListener(eventName, handler)

componentDidUnMount() {

//移除监听

NetInfo.isConnected.removeEventListener('isConnected', this._handleNetStatus);

NetInfo.removeEventListener('statusChange', this._handleNetChange);

};

_handleNetStatus = (isConnected) => {

console.log('First, is ' + (isConnected ? 'online' : 'offline'));

};

_handleNetChange = (status) => {

console.log('Then, is ' + status);

};

(二) 网络请求

React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求 要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可(fetch这个词本身也就是获取的意思)

fetch('https://postman-echo.com/transform/collection')

Fetch还有可选的第二个参数,可以用来定制HTTP请求一些参数。你可以指定header参数,或是指定使用POST方法,又或是提交数据等等

//地址

let url = 'https://postman-echo.com/transform/collection';

//协议

let map = {

method:'POST',

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json',

}

};

//参数

map.body=JSON.stringify({

from:1,

to:2,

}

);

//如果你的服务器无法识别上面POST的数据格式,那么可以尝试传统的form格式

// map.body = 'from=1&to=2';

//发起请求

fetch(url, map)

.then((response) => response.text())

.then((responseJson) => {

alert(responseJson);

})

.catch((err) => {

alert('服务器返回错误:' + err + url+ map);

});

别忘了catch住fetch可能抛出的异常,否则出错时你可能看不到任何提示。

  • 北京

    010-82600385/6

    北京市海淀区西三旗悦秀路北京明园大学校内

  • 上海

    021-54485127

    上海市徐汇区漕溪路250号银海大楼11层

  • 深圳

    0755-25590506

    深圳市龙华新区人民北路美丽AAA大厦15层

  • 成都

    028-85405115

    成都武侯区科华北路99号科华大厦2层

  • 南京

    025-86551900

    南京市白下区汉中路185号鸿运大厦11层

  • 武汉

    027-87804688

    武汉工程大学卓刀泉校区科技孵化器大楼11层

  • 西安

    029-88756251

    西安市高新区高新1路12号天公大厦3层

  • 广州

    020-38342087

    广州市天河软件园柯木塱园5栋三层

  • 沈阳

    024-24349000

    沈阳市沈河区北顺城路137号锦峰大厦7层

  • 济南

    0531-88898293

    济南市高新区舜华路三庆世纪财富中心B3座6层

  • 重庆

    023-68064704

    重庆市九龙坡区渝州路87号双薪时代九楼

  • 长沙

    0731-88713136

    长沙市开福区芙蓉中路海东青大厦B座11楼

Copyright © 2004-2017 华清远见教育集团 版权所有,京ICP备16055225号,京公海网安备110108001117号