Question

如果用户未连接到互联网，我想将其路由到某个屏幕。

我只是无法检测他是否已连接。

我尝试了这段代码，但是没有用：

async componentWillMount()
{
   if (!await NetInfo.isConnected)
   {
      this.props.navigation.navigate('Saved');
   }
}

有经过测试的解决方案可以提出建议吗？

Answer 1

尝试await NetInfo.isConnected.fetch()

ref：https://facebook.github.io/react-native/docs/netinfo.html#isconnected

Answer 2

您可以使用NetInfo进行检查。为此，您必须像这样添加connectionChange事件监听器

componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange.bind(this));
        NetInfo.isConnected.fetch().done(
            (isConnected) => { this.setState({ isConnected: isConnected }); }
        );

，然后在componentWillUnmount

中删除事件侦听器

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

最后更改连接的处理程序方法。我将状态存储在设备本地存储中，您可以执行任何操作。

handleConnectionChange = (isConnected) => {
        if (isConnected) {
            //ToastAndroid.show('Data sync in process...', ToastAndroid.SHORT);
            AsyncStorage.getItem('offlineData')
                .then((json) => JSON.parse(json))
                .then((data) => {
                    console.log(JSON.stringify(data));
                });
        }
        else { ToastAndroid.show('You are offline.', ToastAndroid.SHORT); }

        this.setState({ isConnected: isConnected });
    }

别忘了从NetInfo中添加react-native：）

Answer 3

这是检查online或offline的好例子，甚至您也可以获取连接更改信息。 Source

NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  NetInfo.isConnected.removeEventListener(
     'connectionChange',
     handleFirstConnectivityChange
  );
}
NetInfo.isConnected.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

Answer 4

针对您的情况的另一种解决方案（一种不使用isConnected属性的解决方案）是直接使用从事件处理程序返回的对象，如下所示：

componentDidMount() {
  NetInfo.addEventListener('connectionChange', this.handleNetworkChange);
}

componentWillUnmount() {
  NetInfo.removeEventListener('connectionChange', this.handleNetworkChange);
}

handleNetworkChange = (info) => {
    if (info.type === 'none') {
      this.props.navigation.navigate('Saved');
    }
};

根据NetInfo文档：

  网络状态更改时，将触发
connectionChange事件。事件处理程序的参数是带有键的对象：

type：一种ConnectionType（在上面列出）

有效类型：有效连接类型（上面列出）

连接类型可以是以下之一：无，wifi，蜂窝，未知。

理想情况下，您可以将此信息存储到您的redux存储中，并将侦听器存储到根组件中。

在使用isConnected时，我们遇到了一个奇怪的错误，类似于您提到的@Gabriel Bleu，但对于我们来说，仅当Android设备在一段时间不活动后醒来时，NetInfo.isConnected.fetch（）才返回false。为用户显示离线警告，因此警告永不消失。我在Spencer Carli的课程中找到了此解决方案，它似乎效果更好，但是根据您的需要，您可能希望将isConnected与上面的代码结合使用。

Answer 5

您的代码当前有两个问题。

在较新版本的react生命周期方法中，不推荐使用componentWillMount。
较新版本的react-native已将NetInfo模块从核心中提取出来。请使用@ react-native-community / netinfo。

为了实现所需的行为，您应该执行以下操作。

import NetInfo from "@react-native-community/netinfo";

class CheckConnection extends Component {

    componentDidMount() {
        
        NetInfo.fetch().then(state => {
            handleConnectionState(state)
        }); 
        
    }
        
    handleConnectionState(state) {
        console.log("Connection type", state.type);
        console.log("Is connected?", state.isConnected);
        ... your code to handle the lack of connection
        
    }

}

检测用户是否已连接到互联网？

5 个答案: