react-native - react-native 中的自动更新网络信息状态

Question

我正在使用https://github.com/react-native-community/react-native-netinfo检查我的 react-native 应用程序中的网络连接。当网络丢失并且网络又回来时，如何自动获取网络连接？

下面是我使用的代码。

import React, { Component } from 'react';
import NetInfo from '@react-native-community/netinfo'
import { View, Text,StyleSheet,Dimensions } from 'react-native';
export default class NetStatus extends Component {

    constructor(props) {
        super (props)
        this.state = {
            isConnected:''
  };
}
  
  componentDidMount() {
    this.handleConnectivityChange()
  }

  componentWillUnmount() {
    this.handleConnectivityChange()
  }

  handleConnectivityChange(){
    NetInfo.fetch().then(isConnected => {
        this.setState({ isConnected:isConnected.isInternetReachable });
        console.log('isConnected : ', isConnected);
    })
  };
 
  render() {
    return (
        <View>
        {this.state.isConnected  === true ?
            null
           :(
             <View style={styles.container}>
                <Text style={{color:'#FFF'}}>
                You are not connected to internet....!
                </Text>
             </View>
           )
         }
         </View>
    );
  }
}

当网络丢失并且网络再次恢复时，如何在不获取网络状态的情况下获取网络状态？

标签： react-nativereact-native-community-netinfo

Answer 1

您必须向 NetInfo 添加一个侦听器。

以下代码可以帮助您，

  const [networkState, setNetworkState] = useState(true);

  const onNetworkStateChange = (newState) => {
    setNetworkState(newState.isConnected);
    if (!newState.isConnected) {
      // do anything you want
    }
  };

  const initialCheck = () =>
    NetInfo.fetch().then((connectionInfo) => {
      setNetworkState(connectionInfo.isConnected);
    });

  useEffect(() => {
    initialCheck();
    NetInfo.addEventListener(onNetworkStateChange);
  }, []);