Как эффективнее поместить этот ящик в стопку?

Question

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

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Splash from './src/components/Splash';
import Login from './src/components/Login';
import SignUp from './src/components/SignUp';
import HomeScreen from './src/components/HomeScreen';
import Home from './src/components/Home';
import DeviceRegistration from './src/components/DeviceRegistration';
import Currency from './src/components/Currency';
import Beep from './src/components/Beep';
import Agreement from './src/components/Agreement';
import PoliceIconPage from './src/components/PoliceIconPage';
import ProductVerification from './src/components/ProductVerification';
import EmergencyCall from './src/components/EmergencyCall';
import CallOrAlarm from './src/components/CallOrAlarm';
import CameraRegistration from './src/components/CameraRegistration';
import NotificationHistory from './src/components/NotificationHistory';


const Navigation = StackNavigator(
  {
  Splash: { screen: Splash },
  Login: { screen: Login },
  SignUp: { screen: SignUp },
  HomeScreen: { screen: HomeScreen },
  Home: { screen: DrawerNavigator({
    Home: {
      screen: Home,
      navigationOptions: {
        drawer: {
          label: 'Login'
        }
      }
    },
    EmergencyCall: { 
      screen: EmergencyCall,
      navigationOptions: {
        drawer: {
          label: 'EmergencyCall'
        }
      }
    },
    DeviceRegistration: { 
      screen: DeviceRegistration,
      navigationOptions: {
        drawer: {
          label: 'DeviceRegistration'
        }
      }
    },
    Beep: { screen: Beep,
      navigationOptions: {
        drawer: {
          label: 'Beep'
        }
      }
    },

  })
  },
  Agreement: { screen: Agreement },
  DeviceRegistration: { screen: DeviceRegistration },
  Currency: { screen: Currency },
  Beep: { screen: Beep },
  PoliceIconPage: { screen: PoliceIconPage },
  ProductVerification: { screen: ProductVerification },
  EmergencyCall: { screen: EmergencyCall },
  CallOrAlarm: { screen: CallOrAlarm },
  CameraRegistration: { screen: CameraRegistration },
  NotificationHistory: { screen: NotificationHistory }, },
  {
    headerMode: 'none'
  });


export default Navigation;

Вот файл Home.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

class Home extends Component {
    render() {
        console.log(this.props.navigation.state);
        return (
            <View>
                <TouchableOpacity
                    onPress={() => this.props.navigation.navigate('DrawerOpen')}
                >
                <Text>Home page yo"</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


export default Home;

Ни один из руководств, которые я читал / видел / смотрел, не делал этого таким образом. Однако пока все работает так, как я хочу. Когда я нажимаю на "Текст", он открывает ящик. У меня были трудности с тем, чтобы обернуть свой мозг вокруг размещения вкладок / ящиков, вложенных в стеки, и это было единственное решение, которое я мог придумать. Я открыт для предложений о способах рефакторинга / переписывания этого, чтобы он был более эффективным и вызывал меньше проблем в будущем.