NetInfo在react-native中不能完美地工作（通常不会更新）

Question

我正在使用react-native开发示例应用程序。我正在调用另一个屏幕组件之后创建Netinfo文件。

我应该在哪里放置这个组件以将其放入所有屏幕？

主要问题是网络更改时状态并不总是在变化。

如果我选择离线显示红色textview，然后我选择在线显示绿色Textview。再次，如果我改变tooffline它不会更新。

这是我的示例代码：

import React, { PureComponent } from 'react';
import { View, Text, NetInfo, Dimensions, StyleSheet } from 'react-native';

const { width } = Dimensions.get('window');

function MiniOfflineSign() {
  return (
    <View style={styles.offlineContainer}>
      <Text style={styles.offlineText}>No Internet Connection</Text>
    </View>
  );
}

class OfflineNotice extends PureComponent {
  state = {
    isConnected: true
  };

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

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

  handleConnectivityChange = isConnected => {
    if (isConnected) {
      this.setState({ isConnected });
    } else {
      this.setState({ isConnected });
    }
  };

  render() {
    if (!this.state.isConnected) {
      return (
         <View style={styles.offlineContainer}>
          <Text style={styles.offlineText}>No Internet Connection</Text>
         </View>
         );
    }else{
       return (
         <View style={[styles.offlineContainer, {backgroundColor:'green'}]}>
          <Text style={styles.offlineText}>Internet Connection Is Availiable</Text>
         </View>
         );

    }
  }
}

const styles = StyleSheet.create({
  offlineContainer: {
    backgroundColor: '#b52424',
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    width,
    position: 'absolute',
    top: 30
  },
  offlineText: { color: '#fff' }
});

export default OfflineNotice;