React native 网络信息在本机中不工作时出错

我在我的代码中使用网络信息检查互联网连接，但它不适用于我。这将产生错误

类型错误：undefined不是对象（正在计算“reactNative.Netinfo.isConected”）

我还在AndroidManifest.xml中设置了权限

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

但这对我不起作用

我的代码在这里

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

export default class App extends Component{

  constructor(){

    super();

    this.state={

      connection_Status : ""

    }

  }

  componentDidMount() {

    NetInfo.isConnected.addEventListener(
        'connectionChange',
        this._handleConnectivityChange

    );

    NetInfo.isConnected.fetch().done((isConnected) => {

      if(isConnected == true)
      {
        this.setState({connection_Status : "Online"})
      }
      else
      {
        this.setState({connection_Status : "Offline"})
      }

    });
  }


  componentWillUnmount() {

    NetInfo.isConnected.removeEventListener(
        'connectionChange',
        this._handleConnectivityChange

    );

  }

  _handleConnectivityChange = (isConnected) => {

    if(isConnected == true)
      {
        this.setState({connection_Status : "Online"})
      }
      else
      {
        this.setState({connection_Status : "Offline"})
      }
  };

  render() {

    return (

      <View style={styles.MainContainer}>


        <Text style={{fontSize: 20, textAlign: 'center', marginBottom: 20}}> You are { this.state.connection_Status } </Text>


      </View>

    );

  }

}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  },

  TextStyle: {
    fontSize:20,
    textAlign: 'center'
  }

});

从'react native'导入{样式表、文本、视图、NetInfo}；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
这个州={
连接状态：“
}
}
componentDidMount（）{
NetInfo.isConnected.addEventListener(
“连接更改”，
这是.\u handleConnectivityChange
);
NetInfo.isConnected.fetch（）.done（（isConnected）=>{
如果（断开连接==真）
{
this.setState（{connection_Status:“Online”}）
}
其他的
{
this.setState（{connection_Status:“Offline”}）
}
});
}
组件将卸载（）{
NetInfo.isConnected.removeEventListener(
“连接更改”，
这是.\u handleConnectivityChange
);
}
_HandleConnectionChange=（未连接）=>{
如果（断开连接==真）
{
this.setState（{connection_Status:“Online”}）
}
其他的
{
this.setState（{connection_Status:“Offline”}）
}
};
render（）{
返回(
您是{this.state.connection_Status}
);
}
}
const styles=StyleSheet.create({
主容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
填充：20
},
文本样式：{
尺寸：20，
textAlign:“中心”
}
});

---

如何解决这个问题请向我推荐任何解决方案。

我不知道您的React Native版本是什么，但netinfo已被提取到另一个库中

您必须更改

const {
    View,
    ImageBackground,
    ActivityIndicator,
    NetInfo,
    Platform,
    StyleSheet,
} = ReactNative;

到

---

对于在2021年尝试使用此功能的用户，netinfo与react native分开，需要从此处单独导入：

如果使用时仍有错误，可能是因为取数已折旧，所以不需要使用

componentDidMount() {

    NetInfo.isConnected.addEventListener(
        'connectionChange',
        this._handleConnectivityChange

    );

    NetInfo.isConnected.fetch().done((isConnected) => {

      if(isConnected == true)
      {
        this.setState({connection_Status : "Online"})
      }
      else
      {
        this.setState({connection_Status : "Offline"})
      }

    });
  }

用这个代替

componentDidMount() {
    NetInfo.addEventListener(this.handleConnectivityChange);

    // The fetch is not needed as the listen will send the current state when you subscribe to it
  }

 componentWillUnmount() {
    NetInfo.removeEventListener(this.handleConnectivityChange);
  }

  handleConnectivityChange = state => {
    if (state.isConnected) {
      Alert.alert('online');
      this.setState({connection_Status: 'Online'});
    } else {
      Alert.alert('offline');
      this.setState({connection_Status: 'Offline'});
    }
  };

如本文所述

---

我使用的是react本机版本0.60，已弃用。改用react native community/react native netinfo。从react native Documentation开始，拆分已经完成。（通常，不要提供无效的替代方案。）我不知道第一个变体指的是什么。

componentDidMount() {
    NetInfo.addEventListener(this.handleConnectivityChange);

    // The fetch is not needed as the listen will send the current state when you subscribe to it
  }

 componentWillUnmount() {
    NetInfo.removeEventListener(this.handleConnectivityChange);
  }

  handleConnectivityChange = state => {
    if (state.isConnected) {
      Alert.alert('online');
      this.setState({connection_Status: 'Online'});
    } else {
      Alert.alert('offline');
      this.setState({connection_Status: 'Offline'});
    }
  };