react-native - React Native 应用程序 Netinfo 返回未知

Question

我正在使用 react native 构建一个应用程序，但它不是仅在 ios 和 Android 中使用 axios 获取数据，它工作正常

当我使用 Netinfo 检查网络状态时，它返回未知

 componentWillMount() {


    this.getLocation().done();


    var cusineServiceParams = {
      'limit': '6',
      'offset': '0',
    };
    axios.post('http://www.some.preview.domain.com/api/gc', cusineServiceParams)
      .then(function (response) {
        this.setState({
          cusineList: response.data
        })
      }.bind(this))
      .catch(function (error) {
        alert('connection error');
      });

  }

我总是收到连接错误

这是我的 info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>SOMEAPP</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>org.reactjs.native.example.somea</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>SomeApp</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>UIAppFonts</key>
    <array>
        <string>Andale Mono.ttf</string>
        <string>Arial Black.ttf</string>
        <string>Arial.ttf</string>
        <string>Comic Sans MS.ttf</string>
        <string>Courier New.ttf</string>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Georgia.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Microsoft Sans Serif.ttf</string>
        <string>Octicons.ttf</string>
        <string>Roboto.ttf</string>
        <string>Roboto_medium.ttf</string>
        <string>Rubik-Black.ttf</string>
        <string>Rubik-BlackItalic.ttf</string>
        <string>Rubik-Bold.ttf</string>
        <string>Rubik-BoldItalic.ttf</string>
        <string>Rubik-Italic.ttf</string>
        <string>Rubik-Light.ttf</string>
        <string>Rubik-LightItalic.ttf</string>
        <string>Rubik-Medium.ttf</string>
        <string>Rubik-MediumItalic.ttf</string>
        <string>Rubik-Regular.ttf</string>
        <string>SF-UI-Text-Regular.otf</string>
        <string>SanFrancisco.ttf</string>
        <string>SanFranciscoBold.ttf</string>
        <string>SanFranciscoThin.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Skia.ttf</string>
        <string>Times New Roman.ttf</string>
        <string>Zocial.ttf</string>
        <string>rubicon-icon-font.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
    </array>
    <key>UIBackgroundModes</key>
    <array>
        <string>fetch</string>
        <string>location</string>
        <string>remote-notification</string>
    </array>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
</dict>
</plist>

Answer 1

检查互联网连接的步骤:

1. 将其放入 import "NetInfo"

2. 在 componentwillMount() 中添加这一行

   NetInfo.isConnected.addEventListener('change', this.handleConnectionChange);
   
     NetInfo.isConnected.fetch().done(
       (isConnected) => { this.setState({ netStatus: isConnected }); }
     );
   
     NetInfo.isConnected.fetch().done((isConnected) => {
   
     if (isConnected)
     {
       //Put your code here when internet is connected
     }else{
      // Alert for no internet
     }
    });
   
   componentDidMount()
        {
          NetInfo.isConnected.addEventListener('change', this.handleConnectionChange);
   
          NetInfo.isConnected.fetch().done(
            (isConnected) => { this.setState({ netStatus: isConnected }); }
          );
        }
      //method
      handleConnectionChange = (isConnected) => {
              this.setState({ netStatus: isConnected });
              console.log(`is connected: ${this.state.netStatus}`);
            }