Question

我们正在以下列方式使用react-native NetInfo。

export default class NetworkStatus extends React.PureComponent {
 constructor(props){
  super(props);

   NetInfo.addEventListener(
     'change',
     this.onConnectivityChange
  ); 
 }

 onConnectivityChange = (status) => {
   NetInfo.isConnected.fetch().then(isConnected => {
     console.log('*********Network status ' + (isConnected ? 'online' : 
    'offline'));
 });
}

以离线模式启动应用程序。我们得到了以下控制台。

*********网络状态离线。

然后我们打开wifi并连接。但我们两次离线控制台。

*********网络状态离线。

*********网络状态离线。

这是NetInfo Library中的错误吗？有没有办法解决它。

使用的版本：

“反应”：“16.0.0-alpha.6”

“react-native”：“0.44.0”，

Answer 1

您必须更改

NetInfo.addEventListener(
 'change',
 this.onConnectivityChange
);

到

NetInfo.addEventListener(
 'connectionChange',
 this.onConnectivityChange
);

Answer 2

如果您在模拟器中遇到此问题，那是由于网络连通性，因为一旦关闭Internet连接，套接字就会被破坏，即使您打开它，套接字也无法恢复，react-native会使用套接字来运行该应用程序。请尝试在实际的电话或释放模式下使用它。很好。

componentDidMount() {
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange)
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange)
  }

  handleConnectivityChange = (isConnected: any) => {
    if (isConnected) {
      this.setState({ isConnected })
    } else {
      this.setState({ isConnected })
    }
  }

Answer 3

我尝试在使用0.57.8的旧版应用程序上解决相同问题时对此进行了研究。

将我们的反应本机的NetInfo had a bug更改为后来的版本。

要解决此问题，我不得不更改代码以使用@react-native-community/netinfo中的NetInfo，而不是react native附带的代码。

我希望这可以帮助其他人。

即使网络已连接，react-native中的NetInfo也会返回isConnected

3 个答案: