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

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

axios.interceptors.response.use（空，函数（错误）{
如果（！error.status）{
//网络错误
NetInfo.isConnected.fetch（）。然后（isConnected=>{
console.log（未连接？'online'：'offline'）；
如果（！未连接）
{
//如何提示用户启用wifi或蜂窝
}
});
}
返回承诺。拒绝（错误）；
});我认为有另一种方法可以通知用户，无论屏幕如何，设备的连接都会丢失。
我的方法是监听组件中的网络状态更改，并将此状态更新为reducer。如果使用react导航，则可以在与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);

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

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

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

ReduxNavigation.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);

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

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

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

类ReduxNavigation扩展了React.Component{
render（）{
返回(
);
}
}
const-mapStateToProps=state=>（{return state}）；
导出默认连接（MapStateTops）（ReduxNavigation）；

Screen1.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);

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

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

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

class Screen1扩展了组件{
render（）{
返回(
家
{this.props.networkStatus？空：(
没有互联网连接
)}
);
}
}
常量mapStateToProps=状态=>{
const{networkStatus}=state.common；//common是减速机名称
返回{networkStatus}；
};
导出默认连接（MapStateTops）（屏幕1）；

这就是我在我的应用程序中所做的。如果设备已连接，则不显示任何内容。但是，如果没有连接，用户可以看到网络信息。您可以决定如何为您的屏幕显示和UI设计。我希望这对你有帮助
 谢谢兄弟，但我的主要问题是提示用户启用移动数据或wifi，我想在全球范围内这样做，所以我不需要将其代码添加到我的所有组件中。很抱歉，我的回答帮不了你。我只是觉得在axios拦截器中提示用户调用网络请求对我来说很奇怪。所以，对我来说，我只在一些我想要的屏幕上显示这个网络状态是可以的。希望你能找到答案。