React-Native NetInfo 总是返回 No Internet connection答案

【问题标题】：React-Native NetInfo always returns No Internet connectionReact-Native NetInfo 总是返回 No Internet connection
【发布时间】：2018-09-09 09:36:04
【问题描述】：

我目前正在尝试在我的一个 react-native 应用程序中实现 Web 服务调用，并使用 react-native-web-service-handler 调用 Get 和 Post Web API。

请看下面我的函数。

getRandomUserList() {    
  WebServiceHandler.get(APIConstants.baseURL, null, null)
      .then((val)=>{
          console.log('callapi: ' + JSON.stringify(val))
          this.setState({data:val})
      })
      .catch((error) => console.log('callapi:'+ JSON.stringify(error)));
}

APIConstants 如下所示，

const APIConstants = {
    baseURL:"https://randomuser.me/api/?results=50"
}

我是这样调用这个函数的，

componentDidMount() {
  this.getRandomUserList();
}

请找到WebServiceHandler.get函数如下，

static get(url: String, headerParam: Object, parameter: Object){
  console.log('WebServiceHandler:Initiating GET request');

  return new Promise(function(success, failed){
    NetInfo.isConnected.fetch().done((isConnected) => {
          console.log('WebServiceHandler: Network Connectivity status: ' + isConnected);
          if (!isConnected) {
            failed({name:'503',message:"No Internet connection"});
          }else {
            let URL = url + WebServiceHandler.parameter(parameter);
            console.log('URL:-' + URL);
            fetch(URL,{
              method: 'get',
              'headers': WebServiceHandler.header(headerParam)
            })
            .then(function(response) {
              console.log(response.status);
                if (!response.ok) {
                  throw {name:response.status,message:"http request failed", value:response.json()};
                }
                return response.json();

            })
            .then(function(jsonResponse) {
              console.log('************************ HTTP GET Succes ************************ ');
              success(jsonResponse);
            })
            .catch(function(err) {
                console.log('************************ HTTP GET Failed **************************');
                  failed(err)
            });
          }
        });
  });
}

它总是返回以下输出，

WebServiceHandler: Network Connectivity status: false
App.js:50 callapi:{"name":"503","message":"No Internet connection"}

我在 Wi-Fi 和宽带连接上尝试了很多，但没有成功。

经过研究，我找到了this article on Github，也实现了这个功能。

static isNetworkConnected() {
  if (Platform.OS === 'ios') {
    return new Promise(resolve => {
      const handleFirstConnectivityChangeIOS = isConnected => {
        NetInfo.isConnected.removeEventListener('connectionChange', handleFirstConnectivityChangeIOS);
        resolve(isConnected);
      };
      NetInfo.isConnected.addEventListener('connectionChange', handleFirstConnectivityChangeIOS);
    });
  }
  return NetInfo.isConnected.getConnectionInfo();
}

但它仍然给我同样的错误信息。谁能帮我解决这个问题？

仅供参考。你可以在这里找到相同的question，但没有答案。

谢谢。

【问题讨论】：

标签： ios facebook reactjs react-native react-native-ios

【解决方案1】：

终于有答案了，变通办法是这样的，

static isNetworkConnected() {
      return NetInfo.getConnectionInfo().then(reachability => {
        if (reachability === 'unknown') {
          return new Promise(resolve => {
            const handleFirstConnectivityChangeIOS = isConnected => {
              NetInfo.isConnected.removeEventListener('connectionChange', handleFirstConnectivityChangeIOS);
              resolve(isConnected);
            };
            NetInfo.isConnected.addEventListener('connectionChange', handleFirstConnectivityChangeIOS);
          });
        }
        reachability = reachability.toLowerCase();
        return (reachability !== 'none' && reachability !== 'unknown');
      });
}

我们应该实现getConnectionInfo()，因为fetch()是不推荐使用的方法。

或者

将NetInfo.isConnected.fetch() 更新为NetInfo.getConnectionInfo()。这也可以。

谢谢。

【讨论】：