今天要和大家分享的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可能抛出的异常，否则出错时你可能看不到任何提示。