React Native - How to set the drawer navigation content on the particular tab based on drawer item selection?

问题

What i want to achieve is there are 2 tabs in my app

1) Home => On press it shows a simple screen

2) Menu => On press it opens and close drawer based on whether drawer is opened or not.

Drawer has custom content. It has 4 buttons 1) Accounts 2) Reports 3) Graph 4) List

Selecting on any of the drawer item it should open a respective page in the "Menu" tab navigator space.

So how to manage this kind of navigation?

import React from 'react';
import { View, Text } from 'react-native'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import ShipmentScreen from '../containers/Shipment/ShipmentScreen';
import LoginScreen from '../containers/Login/LoginScreen';
import ShipmentDetailScreen from '../containers/Shipment/ShipmentDetailScreen';
import AuthLoadingScreen from '../containers/AuthLoadingScreen';
import BarcodeScreen from '../containers/Barcode/BarcodeScreen';
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createDrawerNavigator } from 'react-navigation-drawer';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Colors from "../utils/Colors";
import Sidebar from '../components/Sidebar';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}
class Data extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Menu Screen</Text>
            </View>
        );
    }
}

const defaultStackNavOptions = {
    headerStyle: {
        backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
    },
    headerTitleStyle: {
        fontWeight: 'bold',
    },
    headerBackTitleStyle: {
        fontWeight: 'bold',
    },
    headerTintColor: Platform.OS === 'android' ? Colors.lightColor : Colors.primaryColor,
    headerTitle: 'SFL'
};

const TabNavigator = createBottomTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <MaterialCommunityIcons style={{ color: tintColor }} size={25} name={'home'} />
                </View>),
        },
    },
    Menu: {
        screen: sideDrawer,
        navigationOptions: {
            tabBarLabel: 'Menu',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <MaterialCommunityIcons style={{ color: tintColor, }} size={25} name={'menu'} />
                </View>),

        },
    },
},
    {
        initialRouteName: "Home",
        activeColor: Colors.activeTabColor,
        inactiveColor: Colors.inactiveTabColor,
        barStyle: {
            backgroundColor: Colors.grayColor
        },
        tabBarOptions: {
            style: {
                borderTopColor: 'transparent',
                shadowColor: Colors.darkColor,
                shadowOpacity: 1,
                shadowRadius: 30,
                shadowOffset: {
                    height: 10,
                    width: 10
                },
                elevation: 5
            },
            labelStyle: {
                fontSize: 12,
                fontWeight: 'bold'
            },
            tabStyle: {
                paddingVertical: 5
            }
        }
    },
);

const sideDrawer = createDrawerNavigator(
    {
        ScreenA: { screen: Data },
        ScreenB: { screen: Data },
        ScreenC: { screen: Data }
    },
    {
        drawerPosition: 'right',
        contentComponent: Sidebar,
    }
)

export default AppContainer = createAppContainer(TabNavigator)

How can i will be able to achieve this?

can anyone suggest a workaround solution?

Thanks.

来源：https://stackoverflow.com/questions/60880330/react-native-how-to-set-the-drawer-navigation-content-on-the-particular-tab-ba