为什么在启动应用 w/o Internet 时没有正确触发 React Native 的 NetInfo？

Question

我有一个组件可以跟踪设备的 Internet 连接并在没有连接时显示一个红色的小横幅。一般来说，它工作正常：当您在应用程序中切换互联网时，横幅会出现并消失。

但是，如果您在没有互联网的情况下启动应用程序，它不会显示横幅。一旦您打开互联网，它将从此正常工作。

这里是组件，OfflineNotice.tsx:

import * as React from 'react';
import { NetInfo, StyleSheet, Text, View } from 'react-native';

interface State {
  isConnected: boolean;
}

export class OfflineNotice extends React.Component<any, State> {
  public state = {
    isConnected: true,
  };

  public handleConnectivityChange = (isConnected: boolean) => {
    if (isConnected !== this.state.isConnected) {
      console.log('isConnected', isConnected);
      this.setState({ isConnected });
    }
  };

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

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

  public render() {
    if (!this.state.isConnected) {
      return (
        <View style={styles.container}>
          <Text style={styles.offlineText}>
            No Internet Connection
          </Text>
        </View>
      );
    }
    return null;
  }
}

Answer 1

正如 JRK 在他上面的评论中很快指出的那样，解决方案很简单。连接变化触发事件，当你在没有互联网的情况下启动应用程序时，没有连接变化。

如果你初始化 isConnected 状态为 false，连接时会触发事件已启动。

最好的方法是在构造函数中：

constructor(props) {
  super(props);

  NetInfo.isConnected.fetch().then(isConnected => {
    this.setState({isConnected});
  });
}

如果不这样做，只是在this.state中将isConnected设置为false，并在componentDidMount中添加事件监听器，则不会起作用正确地 Android。从 a comment 到有关此主题的一篇 Medium 文章，为以上内容提供给 Terry Bazi 的支持。

您可以在 NetInfo 上的 React Native 文档中的示例中了解更多信息，尤其是 isConnected 属性的最后一节：https://facebook.github.io/react-native/docs/netinfo#properties-1

为什么在启动应用 w/o Internet 时没有正确触发 React Native 的 NetInfo？

Why is React Native's NetInfo not being triggered properly when starting app w/o Internet?

network-connection

typescript

reactjs

react-native