React-Native NetInfo 总是 returns 没有互联网连接

Question

我目前正在尝试在我的一个反应本机应用程序中实现网络服务调用，并使用 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)
            });
          }
        });
  });
}

它总是returns输出如下，

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 而没有答案。

谢谢。

Answer 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()。这也行。

谢谢。

React-Native NetInfo 总是 returns 没有互联网连接

React-Native NetInfo always returns No Internet connection

facebook

ios

reactjs

react-native

react-native-ios