在React-Native中,Net-info不起作用时发生错误

r55awzrz  于 2023-04-22  发布在  React
关注(0)|答案(4)|浏览(188)

我在我的代码中使用Net-info检查互联网连接,但它对我不起作用。它给予出错。

输入错误:undefined不是对象(evaluating '_reactNative.Netinfo. isConnected')

我还在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'
  }

});

如何能解决这个问题请给我任何解决方案。

kninwzqo

kninwzqo1#

我不知道你有什么版本的React Native,但是netinfo已经被提取到不同的库中。
https://github.com/react-native-community/react-native-netinfo

hi3rlvi2

hi3rlvi22#

对于在2021年尝试使用它的人来说,netinfo与react native是分开的,需要从这里单独导入:https://github.com/react-native-netinfo/react-native-netinfo
如果在使用的时候还是有错误,那可能是因为取数贬值了,所以不用再用了

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'});
    }
  };

在github https://github.com/react-native-netinfo/react-native-netinfo/issues/279中提到

nfg76nw0

nfg76nw03#

你必须改变

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

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

const NetInfo = require('@react-native-community/netinfo');
 in node-module/react-native-cached-image/CachedImage.js
vxqlmq5t

vxqlmq5t4#

在我例子中,我使用的是旧的react native“react-native“:“0.62.2”.现在netinfo(@react-native-community/netinfo)版本是9.3.9,这个版本在我的www.example.com上不工作project.so,我刚刚使用

"@react-native-community/netinfo": "^9.3.9"

"@react-native-community/netinfo": "^6.0.2"

意味着我只是降低了版本

相关问题