Question

我在我的应用中使用NetInfo来检查它是否已连接到互联网。

NetInfo.isConnected.fetch().then( (isConnected) => {
    console.log('isConnected: ', isConnected);
});

如果我连接到路由器或移动数据，则返回true，否则返回false。

我的问题是，如果我已连接到路由器或我的移动数据已开启，即使它没有互联网连接。它仍然是真的。

有什么想法解决这个问题吗？或其他解决方法/替代方案来检查互联网连接？

Answer 1

This is due to a bug with RN.

https://github.com/facebook/react-native/issues/8615

There are a couple of work arounds listed here:

componentDidMount() {
  const dispatchConnected = isConnected => this.props.dispatch(setIsConnected(isConnected));

  NetInfo.isConnected.fetch().then().done(() => {
    NetInfo.isConnected.addEventListener('change', dispatchConnected);
  });
}

or

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

  return NetInfo.isConnected.fetch();
}

Answer 2

1- 清理 gradlew，在您的 android 文件夹中运行命令：

Linux / MacOS --------------> ./gradlew clean
Windows PowerShell --------> .\gradlew clean
Windows cmd --------------> gradlew clean

2- 导入并使用此组件：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import NetInfo from '@ react-native-community / netinfo';


class ConnectionInfo extends Component {
    NetInfoSubcription = null;


    constructor (props) {
        super (props);
        this.state = {
            connection_status: false,
            connection_type: null,
            connection_net_reachable: false,
            connection_wifi_enabled: false,
            connection_details: null,
        }

    }

    componentDidMount () {
        this.NetInfoSubscribtion = NetInfo.addEventListener (
            this._handleConnectivityChange,
          );
    }
    
    componentWillUnmount () {
        this.NetInfoSubscribtion && this.NetInfoSubscribtion ();
      }

      _handleConnectivityChange = (state) => {
        this.setState ({
          connection_status: state.isConnected,
          connection_type: state.type,
          connection_net_reachable: state.isInternetReachable,
          connection_wifi_enabled: state.isWifiEnabled,
          connection_details: state.details,
        })
      }

    
    render () {
        return (
            <View>
                <Text>
                Connection Status: {this.state.connection_status? 'Connected': 'Disconnected'}
                </Text>
                <Text>
                Connection Type: {this.state.connection_type}
                </Text>
                <Text>
                Internet Reachable: {this.state.connection_net_reachable? 'YES': 'NO'}
                </Text>
                <Text>
                Wifi Enabled: {this.state.connection_wifi_enabled? 'YES': 'NO'}
                </Text>
                <Text>
                Connection Details: {'\ n'}
                {this.state.connection_type == 'wifi'?
                    (this.state.connection_details.isConnectionExpensive? 'Connection Expensive: YES': 'Connection Expensive: NO')
                    + '\ n'
                    + 'ssid:' + this.state.connection_details.ssid
                    + '\ n'
                    + 'bssid:' + this.state.connection_details.bssid
                    + '\ n'
                    + 'strength:' + this.state.connection_details.strength
                    + '\ n'
                    + 'ipAddress:' + this.state.connection_details.ipAddress
                    + '\ n'
                    + 'subnet:' + this.state.connection_details.subnet
                    + '\ n'
                    + 'frequency:' + this.state.connection_details.frequency
                    :
                    this.state.connection_type == 'cellular'?
                    (this.state.connection_details.isConnectionExpensive? 'Connection Expensive: YES': 'Connection Expensive: NO')
                        + '\ n'
                        + 'cellularGeneration:' + this.state.connection_details.cellularGeneration
                        + '\ n'
                        + 'carrier:' + this.state.connection_details.carrier
                    :
                    '---'
                }
                </Text>
            </View>
        );
    }
}

 
  export default ConnectionInfo;

3.从 Android Studio 重建项目：

Android Studio> File> 使缓存失效并重启

Information based on this tutorial

Netinfo.isConnected.fetch（）返回true

2 个答案: