Мне нужно показывать модал оповещения на каждом экране, когда int enet не работает - PullRequest
Новая
       3

Мне нужно показывать модал оповещения на каждом экране, когда int enet не работает

0 голосов
/ 09 февраля 2020

Мне нужно показывать модальный NetAlert на каждом экране, когда int enet выключен. Для этого я создал компонент NetAlertModal. Я не уверен, где визуализировать этот компонент. Я использую реагирующую навигацию Переключить навигатор. Если я выполняю рендеринг, как показано ниже, он не отображает экран входа в систему.

Я новичок, чтобы реагировать на нативный, поэтому, пожалуйста, помогите.

Ниже приведен мой код 

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

Ответы [ 2 ]

1 голос
/ 10 февраля 2020 
import { NetInfo } from 'react-native';

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

используйте указанный выше код в качестве HO C или сделайте его глобальным для вашего root файла

0 голосов
/ 10 февраля 2020

Попробуйте использовать приведенный ниже пример в своем приложении. js, который я создаю с помощью @react-native-community/netinfo library 


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;

Измените его в соответствии с вашими требованиями. Не стесняйтесь сомнений.

...