react-native 全局提示用户在网络失败时启用 wifi 或蜂窝

Question

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

axios.interceptors.response.use(null, function(error) {
  if (!error.status) {
    // network error

    NetInfo.isConnected.fetch().then(isConnected => {
      console.log(isConnected ? 'online' : 'offline');

      if(!isConnected)
      {
        // how to prompt user enable wifi or cellular 
        
        
      }

    });

  }

  return Promise.reject(error);
});

Answer 1

我认为有另一种方法可以通知用户设备的连接丢失，无论屏幕如何。 我的方法是监听组件中的网络状态变化，并将这个状态更新到reducer。如果你使用 react-navigation，你可以监听一个与 redux 连接的组件（eg.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);

这是我在我的应用程序中所做的方式。如果设备已连接，则不显示任何内容。但是，如果它没有连接，用户可以看到网络信息。您可以决定如何为您的屏幕显示和 UI 设计。我希望它会帮助你。