Question

我想知道当全球axios出现网络故障时如何提示用户启用wifi或蜂窝网络。我使用axios拦截器来捕获网络错误，并且使用NetInfo来检测没有互联网连接，但是我不知道如何支持用户启用wifi或蜂窝网络？

server -> options

Answer 1

我认为，有一种替代方法可以通知用户，无论屏幕如何，设备的连接都会丢失。我的方法是侦听组件中的网络状态更改，并将此状态更新为reducer。如果您使用react-navigation，则可以侦听与redux连接的组件（例如ReduxNavigation）。这样，每个屏幕都可以显示丢失的网络状态，并通知用户检查网络连接。

NeworkStatus.js

class NetworkStatus extends Component {
 componentWillMount() {
  //For device's network status
  NetInfo.isConnected.fetch().done(data => {
    this.props.updateData({
      prop: "networkStatus",
      value: data
    });
  }); 
 }

 componentDidMount() {
  //Listener for device's network status
  NetInfo.isConnected.addEventListener(
    "connectionChange",
    this.handleConnectivityChange
 );
 }

 handleConnectivityChange = change => {
  this.props.updateData({
    prop: "networkStatus",
    value: change
  });
 };

 render() {
    return null;
 }
}

const mapStateToProps = state => {
  return state;
};

export default connect(mapStateToProps,{updateData})(NetworkStatus);

ReduxNavigation.js

class ReduxNavigation extends React.Component {
 render() {
  return (
  <View style={{ flex: 1 }}>
    <NetworkStatus />
    <AppNavigation/>
  </View>
  );
 }
}

const mapStateToProps = state => ({ return state});
export default connect(mapStateToProps)(ReduxNavigation);

Screen1.js

class Screen1 extends Component {
   render(){
       return (
         <View>
            <Text>Home</Text>
            {this.props.networkStatus ? null : (
             <View>
               <Text>No Internet Connection</Text>
             </View>
             )}
         </View>
       );
   }
}

const mapStateToProps = state => {
  const { networkStatus } = state.common; // common is reducer name
  return {networkStatus};
};
export default connect(mapStateToProps)(Screen1);

这是我在App中完成的方法。如果设备已连接，则不会显示任何内容。但是，如果没有连接，则用户可以看到网络信息。您可以决定如何显示屏幕和UI设计。希望对您有帮助。

当网络出现故障时，react-native全局提示用户启用wifi或蜂窝网络

1 个答案: