Как показать другое боковое меню при нажатии кнопки на корневом экране?

Question

Я настраиваю некоторые меню, которые я хочу показывать только при нажатии кнопки на первом экране. Итак, я сделал 5 констант в моем App.js, состоящем из: приложений (которые являются основными), Mhss, Labs, Kalabs, Kajurs и Pudirs. Я сделал эти выводы так, чтобы они могли показывать только те меню, с которыми они связаны. На первом экране у меня есть 5 кнопок, которые перешли к Signin1, Signin2 и т. Д. После нажатия первой кнопки я хочу, чтобы она автоматически перешла на Mhss, и то же самое для другой кнопки. Я не знаю, как я должен вызывать эти кнопки с открытия экрана. Я не хочу показывать все меню на одной боковой панели, это будет беспорядок: D. Например, я нажал кнопку с именем Mahasiswa в OpeningScreen.js, и она сразу перешла к SignInMahasiswaScreen, после того как я вошел в систему с моей аутентификацией Firebase, он автоматически перейдет к вызванному StackNavigator, и для других меню будет сделано то же самое. Пожалуйста, помогите мне: D

Я пытаюсь скрыть меню, но все еще не работает, поэтому я решил создать некоторое логическое условие в файле App.js

Вот мой код App.Js:

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView,ScrollView, Dimensions, Image } from 'react-native';
import { createDrawerNavigator, DrawerItems, createAppContainer } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import FormScreen from './screens/FormScreen';
import SigninScreen from './screens/SigninScreen';
import DetailScreen from './screens/DetailScreen';
import * as firebase from "firebase";
import OpeningScreen from './screens/OpeningScreen';
import HomeScreenLaboran from '././screens/laboran/HomeScreenLaboran';
import SigninScreenLaboran from './screens/laboran/SigninScreenLaboran';
import SigninScreenKalab from './screens/kalab/SigninScreenKalab';
import SigninScreenKajur from './screens/kajur/SigninScreenKajur';
import SigninScreenPudir from './screens/pudir/SigninScreenPudir';
import HomeScreenPudir from './screens/pudir/HomeScreenPudir';
import HomeScreenKalab from './screens/kalab/HomeScreenKalab';
import FormScreenKalab from './screens/kalab/FormScreenKalab';
import HomeScreenKajur from './screens/kajur/HomeScreenKajur';
import FormScreenKajur from './screens/kajur/FormScreenKajur';
import FormScreenPudir from './screens/pudir/FormScreenPudir';
import FormScreenLaboran from './screens/laboran/FormScreenLaboran';
import {Notifications} from 'expo';
const { width } = Dimensions.get('window');
var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
  databaseURL: "xxxxxxxxxxxxxxxx",
  projectId: "x",xxxxxxxxxxx
  storageBucket: "xxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default class App extends React.Component{
  render() {
    if(){
      return (
        <Apps/>
      );
    }else if(){
      return (
        <Mhss/>
      );
    }else if(){
      return (
        <Labs/>
      );
    }else if(){
      return (
        <Kalabs/>
      );
    }else if(){
      return (
        <Kajurs/>
      );
    }else if(){
      return (
        <Pudirs/>
      );
    }

  }
}

const CustomDrawerComponent = (props) => (
  <SafeAreaView style={{ flex:1 }}>
    <View style={{height:150, backgroundColor: 'white', alignItems :'center', justifyContent:'center'}}>
      <Image source={require('./assets/up2.png')} style={{height:50, width:50,borderRadius:35 }}/>
    </View>
    <ScrollView>
      <DrawerItems {...props}/>
    </ScrollView>
  </SafeAreaView>
) 

const AppDrawerNavigator = createDrawerNavigator({
  Opening:OpeningScreen,
  Login:SigninScreen,
  LoginLab: SigninScreenLaboran,
  LoginKalab: SigninScreenKalab,
  LoginKajur: SigninScreenKajur,
  LoginPudir: SigninScreenPudir,
})

const Mhs = createDrawerNavigator({
  Home:HomeScreen,
  Form:FormScreen,
}, {
  contentComponent: CustomDrawerComponent,
  drawerWidth: width,
  contentOptions:{
    activeTintColor:'orange'
  }
})

const Lab = createDrawerNavigator({
  HomeLab: HomeScreenLaboran,
})

const Kalab = createDrawerNavigator({
  HomeKalab: HomeScreenKalab,
})

const kajur = createDrawerNavigator({
  HomeKajur:HomeScreenKajur,
})

const Pudir = createDrawerNavigator({
  HomePudir:HomeScreenPudir,
})

const Apps = createAppContainer(AppDrawerNavigator)
const Mhss = createAppContainer(Mhs)
const Labs = createAppContainer(Lab)
const Kalabs = createAppContainer(Kalab)
const Kajurs = createAppContainer(kajur)
const Pudirs = createAppContainer(Pudir)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

А вот мой открытие. Screen.js:

import { StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
  Image,
  Alert } from 'react-native';
  import {Form} from 'native-base';
  import React, { Component } from 'react';
  import GradientButton from 'react-native-gradient-buttons';
import Button from 'react-native-button';
import * as firebase from 'firebase';
import { withNavigation } from 'react-navigation';

class OpeningScreen extends React.Component{
//cobas
    render() {
        return (
          <View style={styles.container}>
            <Form>
            <View >
                <GradientButton blueViolet style={[styles.buttonContainer, styles.loginButton]} onPressAction={() => this.props.navigation.navigate('Login')}>
                    <Text style={{fontSize:18,alignItems:"center",justifyContent:"center"}}>Mahasiswa </Text>
                </GradientButton>
                <GradientButton blueViolet style={[styles.buttonContainer, styles.loginButton]} onPressAction={() => this.props.navigation.navigate('Login')}>
                    <Text style={{fontSize:18,alignItems:"center",justifyContent:"center"}}>Laboran</Text>
                </GradientButton>
                <GradientButton blueViolet style={[styles.buttonContainer, styles.loginButton]} onPressAction={() => this.props.navigation.navigate('LoginKalab')}>
                    <Text style={{fontSize:18,alignItems:"center",justifyContent:"center"}}>Kepala Laboran</Text>
                </GradientButton>
                <GradientButton blueViolet style={[styles.buttonContainer, styles.loginButton]} onPressAction={() => this.props.navigation.navigate('LoginKajur')}>
                    <Text style={{fontSize:18,alignItems:"center",justifyContent:"center"}}>Kepala Jurusan</Text>
                </GradientButton>
                <GradientButton blueViolet style={[styles.buttonContainer, styles.loginButton]} onPressAction={() => this.props.navigation.navigate('LoginPudir')}>
                    <Text style={{fontSize:18,alignItems:"center",justifyContent:"center"}}>Pembantu Direktur I</Text>
                </GradientButton>
            </View>
          </Form>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ECAF00',
      },
      inputContainer: {
          borderBottomColor: '#F5FCFF',
          backgroundColor: '#FFFFFF',
          borderRadius:30,
          borderBottomWidth: 1,
          width:250,
          height:45,
          marginBottom:20,
          flexDirection: 'row',
          alignItems:'center'
      },
      inputs:{
          height:45,
          marginLeft:16,
          borderBottomColor: '#FFFFFF',
          flex:1,
      },
      inputIcon:{
        width:30,
        height:30,
        marginLeft:15,
        justifyContent: 'center'
      },
      buttonContainer: {
        height:45,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom:20,
        width:250,
        borderRadius:30,
      },
      loginButton: {
        backgroundColor: "#00b5ec",
      },
      loginText: {
        fontSize:16,
        color: 'white',
      }
    });

    export default OpeningScreen;