React native 当INTERNET关闭时，我需要在每个屏幕上显示警报模式

当INTERNET关闭时，我需要在每个屏幕上显示NetAlert模式。我已经为此创建了NetAlertModal组件。我不确定在哪里渲染此组件。我正在使用react导航开关导航器。如果我呈现如下，它不会显示登录屏幕

我是新手，所以请帮助我

下面是我的代码

/***App.js*/

  render() {
    return (
      <Provider store={store}>
        <PersistGate>
          <Fragment>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView
              style={styles.safeArea}
              forceInset={{bottom: 'never', top: 'never'}}>
               <NetAlertModal />        <------ Need to show this
              <RootNav
                ref={navigatorRef => {
                  NavigationService.setTopLevelNavigator(navigatorRef);
                }}
              />
            </SafeAreaView>
          </Fragment>
        </PersistGate>
      </Provider>
    );
  }
}

---

将上面的代码用作HOC或使其成为根文件的全局代码

在我使用

@react native community/netinfo

库创建的app.js中尝试下面的示例

import React, { Component } from 'react';
import NetInfo from "@react-native-community/netinfo";
import { View, Text, Modal } from 'react-native';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isConnected: true,
        };
    }

   componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
    }

    componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
    }


    handleConnectivityChange = isConnected => {
        this.setState({ isConnected });
    };

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>


                    {/* your app */}

                </View>
                {
                    !this.state.isConnected &&
                    <Modal
                        visible={!this.state.isConnected}
                        transparent={true}
                        animationType='slide'
                    >
                        <View style={styles.modelStyle}>
                            <View style={styles.modelWrapperStyle}>
                                <Text style={{ textAlign: 'center' }}>{global.strings.oops}</Text>
                                <Text style={{ textAlign: 'center' }}>{global.strings.internetConnection}</Text>
                            </View>
                        </View>
                    </Modal>
                }
            </View>
        );
    }
}

const styles = {
    modelStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)'

    },
    modelWrapperStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#e3dfde',
        padding: 20,
        width: '90%',
        borderRadius: 20
    },
};

export default App;                                                             

从“React”导入React，{Component}；
从“@react native community/NetInfo”导入NetInfo；
从“react native”导入{View，Text，Modal}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
断开连接：是的，
};
}
componentDidMount（）{
NetInfo.isConnected.addEventListener（'connectionChange'，this.handleConnectivityChange）；
}
组件将卸载（）{
NetInfo.isConnected.removeEventListener（'connectionChange'，this.handleConnectivityChange）；
}
handleConnectivityChange=isConnected=>{
this.setState（{isConnected}）；
};
render（）{
返回(
{/*您的应用程序*/}
{
！this.state.isConnected&&
{global.strings.oops}
{global.strings.internetConnection}
}
);
}
}
常量样式={
模型样式：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“rgba（0,0,0,0.5）”
},
modelWrapperStyle：{
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“#e3dfde”，
填充：20，
宽度：“90%”，
边界半径：20
},
};
导出默认应用程序；

---

根据您的要求进行更改。请放心。

我的问题不是如何实现NetInfo。我已经在NetAlertModel组件中实现了它。我需要在堆栈中呈现NetAlertModel。

*/AuthStack.js*/

import {createStackNavigator} from 'react-navigation';

import Login from '../components/login/Login';
import Verify from '../components/verify/Verify';

const rootConfiguration = {
  loginPage: {screen: Login},
  verifyPage: {screen: Verify},
};

const stackNavigatorConfiguration = {
  initialRouteName: 'loginPage',
  headerMode: 'none',
  defaultNavigationOptions: {
    headerTintColor: '#ffeb3b',
    headerTitleStyle: {
      fontWeight: 'bold',
      flex: 1,
      textAlign: 'center',
    },
  },
};

export const AuthStack = createStackNavigator(
  rootConfiguration,
  stackNavigatorConfiguration,
);

import { NetInfo } from 'react-native';

 NetInfo.isConnected.fetch().then(isConnected => {
       if(isConnected)
       {
           console.log('Internet is connected');
       }
 })

import React, { Component } from 'react';
import NetInfo from "@react-native-community/netinfo";
import { View, Text, Modal } from 'react-native';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isConnected: true,
        };
    }

   componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
    }

    componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
    }


    handleConnectivityChange = isConnected => {
        this.setState({ isConnected });
    };

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>


                    {/* your app */}

                </View>
                {
                    !this.state.isConnected &&
                    <Modal
                        visible={!this.state.isConnected}
                        transparent={true}
                        animationType='slide'
                    >
                        <View style={styles.modelStyle}>
                            <View style={styles.modelWrapperStyle}>
                                <Text style={{ textAlign: 'center' }}>{global.strings.oops}</Text>
                                <Text style={{ textAlign: 'center' }}>{global.strings.internetConnection}</Text>
                            </View>
                        </View>
                    </Modal>
                }
            </View>
        );
    }
}

const styles = {
    modelStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)'

    },
    modelWrapperStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#e3dfde',
        padding: 20,
        width: '90%',
        borderRadius: 20
    },
};

export default App;