时间戳

首页 > 解决方案 > 为什么在没有互联网的情况下启动应用程序时没有正确触发 React Native 的 NetInfo？

reactjs - 为什么在没有互联网的情况下启动应用程序时没有正确触发 React Native 的 NetInfo？

问题描述

我有一个组件来跟踪设备的 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;
  }
}

标签： reactjstypescriptreact-nativenetwork-connection

解决方案

正如JRK在上面的评论中如此迅速地指出的那样，解决方案很简单。连接更改会触发该事件，当您在没有 Internet 的情况下启动应用程序时，连接不会发生变化。

如果您在 state 中初始化 为，则在启动连接时将触发该事件。isConnected false

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

constructor(props) {
  super(props);

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

如果您不这样做，而只是设置isConnected为falseinthis.state并在其中添加事件侦听器componentDidMount，它将无法在 Android 上正常工作。从评论到一篇关于这个主题的 Medium 文章，Terry Bazi对上述内容的支持。

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

推荐阅读