####(一) 网络监控 我们用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可能抛出的异常,否则出错时你可能看不到任何提示。 代码地址:https://github.com/roycehe/react-native-100-Demos
原文链接:https://www.f2er.com/react/304451.html不要的吝啬你的赞赏和☆