当互联网关闭时，我需要在每个屏幕上显示警报模式

Question

当Internet中断时，我需要在每个屏幕上显示NetAlert模态。我已经为此创建了一个NetAlertModal组件。我不确定在哪里渲染该组件。我正在使用React Navigation Switch导航器。如果我按如下所示进行渲染，则不会显示登录屏幕。

我是新来的本地人，所以请帮助。

下面是我的代码

/***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>
    );
  }
}

/*rootNav.js*/

const RootNav = createSwitchNavigator(
  {
    Drawer: DrawerNavigator,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'Auth',
  },
);

export default createAppContainer(RootNav);

*/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,
);

Answer 1

import { NetInfo } from 'react-native';

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

将以上代码用作HOC或将其全局设置为您的根文件

Answer 2

[尝试使用我在@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;                                                             

根据您的要求进行更改。随时提出疑问。