檢測用戶是否連接到互聯網？

Question

我想將用戶路由到某個屏幕，以防他沒有連接到互聯網。

我只是無法檢測他是否已連接。

我試過這段代碼，但沒有奏效：

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

任何經過測試的解決方案建議？

Answer 1

嘗試await NetInfo.isConnected.fetch()

參考： 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 });
    }

不要忘記從react-native添加NetInfo :)

Answer 3

您的情況的另一種解決方案（不使用 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 事件在網絡狀態改變時觸發。 事件處理程序的參數是一個帶有鍵的對象：

類型：A ConnectionType（如上所列）

有效類型：有效連接類型（上面列出）

連接類型可以是以下之一：無、wifi、蜂窩、未知。

理想情況下，您可以將此信息存儲到您的 redux 存儲中，並將偵聽器存儲到根組件中。

我們在使用 isConnected 時遇到了一個奇怪的錯誤，類似於您提到的@Gabriel Bleu 但對我們來說，NetInfo.isConnected.fetch() 僅在 Android 設備在一段時間不活動后喚醒時才返回 false。我們用它來離線顯示警告用戶，所以警告從未離開。 我在 Spencer Carli 的課程中​​找到了這個解決方案，它似乎效果更好，但根據您的需要，您可能希望將 isConnected 與上述代碼結合使用。

Answer 4

這是online或offline檢查的一個很好的例子，甚至您也可以獲得連接更改信息。 來源

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 5

您的代碼目前有兩個問題。

1. 在較新版本的反應生命周期方法中，不推薦使用 componentWillMount。
2. 較新版本的 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
        
    }

}