Как показать пользовательскую панель навигации на разных экранах в React Native

Question

Я создал пользовательское меню Drawer для своего приложения, и у меня более 10 экранов. Я создал их с помощью стековой навигации. Теперь я хочу реализовать Custom Drawer на некоторых экранах, таких как Dashboard, UpdateProfile, Contact ect ...!и я хочу, чтобы initialRoute для приложения был HomeScreen, который я дал в качестве initialRoute в своей навигации по стеку.

Дело в том, что мое меню ящика работает нормально, но когда я сначала запускаю свое приложение, оно показывает панель управленияНа экране с ящиком, сначала я хочу показать домашнюю страницу, главная путаница в том, что я не знаю, как обрабатывать несколько переходов в одном приложении, поэтому, пожалуйста, любой специалист по реагированию на навигацию мне нужна помощь.Спасибо

App.js

import CustomDrawer from './drawerNavigation/CustomDrawer';



const StackNavigation = createStackNavigator({

  HomeStack: HomeScreen,
  LoginStack: LoginScreen,
  RegisterStack: RegisterScreen,
  DashboardStack: Dashboard,
  SearchStack: SearchRoutes,
  RoutesStack: Routes,
  RouteDetailsStack: RouteDetails,
  PaymentStack: Payment,
  ConfirmationStack: Confirmation,

  UpdateProfileStack: UpdateProfile,
  RidesHistoryStack: RidesHistory,
  DiscountStack: Discounts,
  ContactStack: Contact,

}, {
    initialRouteName: 'HomeStack',
  });


const StackWithDrawer = createStackNavigator({
  DashboardStack: Dashboard,
  ConfirmationStack: Confirmation,
  UpdateProfileStack: UpdateProfile,
  RidesHistoryStack: RidesHistory,
  DiscountStack: Discounts,
  ContactStack: Contact,
})

**//I want the Drawer Navigation on below Screens when Menu Icon pressed..**
const DrawerNavigator = createDrawerNavigator({
  Dashboard: StackWithDrawer,
  Confirmation: StackWithDrawer,
  UpdateProfile: StackWithDrawer,
  RidesHistory: StackWithDrawer,
  Discounts: StackWithDrawer,
  Contact: StackWithDrawer,
}, {
    contentComponent: CustomDrawer,
    drawerWidth: 300,
    drawerPosition: "right",
  })

const MainNavigation = createSwitchNavigator({
  Drawer: DrawerNavigator,
  Stack: StackNavigation,
});


export default MainNavigation

CustomDrawer.js

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import { NavigationActions } from 'react-navigation'

import Icon from 'react-native-vector-icons/Feather'
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'

export default class CustomDrawer extends Component {

    navigateToScreen = (route) => () => {
        const navigationAction = NavigationActions.navigate({
            routeName: route
        });
        this.props.navigation.dispatch(navigationAction);
    }


    render() {
        return (
            <View style={styles.mainContainer}>
                <View style={styles.header}>
                    <Image source={require('../images/dummy-user.png')} style={styles.headerImage} />
                    <View style={{ flexDirection: 'column', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
                        <Text style={{ fontSize: 18, color: '#fff', textAlign: 'center', }}>Rahat Alam</Text>
                        <Text style={{ fontSize: 14, color: '#fff' }}>Rider Account</Text>

                        <TouchableOpacity style={styles.btnEditProfile} onPress={() => { this.props.navigation.navigate('UpdateProfileStack') }}>
                            <View style={{ flexDirection: 'row' }}>
                                <Icon name="edit" size={20} color="#b5259e" style={{ marginRight: 3 }} />
                                <Text style={{ marginLeft: 3 }}>Edit Profile</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>

                <View style={styles.componentsList}>
                    <View style={{ flexDirection: 'row' }}>
                        <MaterialIcon name="dashboard" size={25} color="#000" />
                        <Text onPress={this.navigateToScreen('DashboardStack')} style={{ marginLeft: 7, fontSize: 17 }}>Dashboard</Text>
                    </View>

                    <View style={{ flexDirection: 'row', paddingTop: 20 }}>
                        <MaterialIcon name="history" size={25} color="#000" />
                        <Text onPress={this.navigateToScreen('RidesHistoryStack')} style={{ marginLeft: 7, fontSize: 17 }}>Rides History</Text>
                    </View>

                    <View style={{ flexDirection: 'row', paddingTop: 20 }}>
                        <MaterialIcon name="directions-car" size={25} color="#000" />
                        <Text onPress={this.navigateToScreen('DiscountStack')} style={{ marginLeft: 7, fontSize: 17 }}>Subscriptions</Text>
                    </View>

                    <View style={{ flexDirection: 'row', paddingTop: 20 }}>
                        <MaterialIcon name="account-balance-wallet" size={25} color="#000" />
                        <Text style={{ marginLeft: 7, fontSize: 17 }}>Wallet</Text>
                    </View>

                    <View style={{ flexDirection: 'row', paddingTop: 20 }}>
                        <MaterialIcon name="search" size={25} color="#000" />
                        <Text onPress={this.navigateToScreen('SearchStack')} style={{ marginLeft: 7, fontSize: 17 }}>Search Routes</Text>
                    </View>

                    <View style={{ flexDirection: 'row', paddingTop: 20 }}>
                        <MaterialIcon name="card-giftcard" size={25} color="#000" />
                        <Text onPress={this.navigateToScreen('DiscountStack')} style={{ marginLeft: 7, fontSize: 17 }}>Discounts</Text>
                    </View>

                    <View style={{ flexDirection: 'row', paddingTop: 20 }}>
                        <MaterialIcon name="help" size={25} color="#000" />
                        <Text onPress={this.navigateToScreen('ContactStack')} style={{ marginLeft: 7, fontSize: 17 }}>Help</Text>
                    </View>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
    },

    header: {
        flexDirection: 'row',
        padding: 15,
        alignItems: 'center',
        height: 170,
        width: '100%',
        backgroundColor: '#b5259e'
    },

    headerImage: {
        height: 120,
        width: 120,
    },

    btnEditProfile: {
        backgroundColor: '#fff',
        margin: 15,
        alignItems: 'center',
        justifyContent: 'center',
        height: 35,
        width: 120,
        borderRadius: 8,
    },

    componentsList: {
        flexDirection: 'column',
        padding: 15,
    },
})

Dashboard.js (Как вы можете видеть, я дал onPress, чтобы открыть ящик в заголовке меню Icon)

export default class Dashboard extends Component {

    static navigationOptions = ({ navigation, navigationOptions }) => {

        return {
            headerTitle: 'Dashboard',
            headerLeft: (<TouchableOpacity />),
            headerRight: (
                <Icon
                    onPress={navigation.toggleDrawer}
                    name="menu"
                    size={30}
                    color="#fff"
                />
            ),

            headerTitleStyle: {
                flex: 1,
                color: '#fff',
                textAlign: 'center',
                alignSelf: 'center',
                fontWeight: 'normal',
            },

            headerStyle: {
                backgroundColor: '#b5259e',
            },
        }
    }