Как переместить tabBar, когда ящик открыт в реакции-навигации

Question

Я использую TabNavigator и DrawerNavigator в своем приложении.

Когда я открываю ящик с опцией «слайд», содержимое скользит вместе с ящиком, но TabBar не скользит вместе.

Я хочу, чтобы TabBar скользил вместе, но я не могу найти никакой опции по этому поводу.

Как я могу это сделать?Не могли бы вы помочь?

------------- [code] ----------------

1)app.js

    ...skip ...

    const DailySalesStack = createStackNavigator({
        DailySalesMain: DailySalesMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailySalesMain'
    });

    const DailyRivalRankStack = createStackNavigator({
        DailyRivalRankMain: DailyRivalRankMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailyRivalRankMain'
    });

    const SalesAnalysisStack = createStackNavigator({
        SalesAnalysisMain: SalesAnalysisMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'SalesAnalysisMain'
    });

    const DailySalesAnalysisStack = createStackNavigator({
        DailySalesAnalysisMain: DailySalesAnalysisMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailySalesAnalysisMain'
    });

    /// DRAWER!
    const SalesStack = createDrawerNavigator({
        DailySales: {
            screen: DailySalesStack,
        },
        DailyRivalRank: {
            screen: DailyRivalRankStack,
        },
        SalesAnalysis: {
            screen: SalesAnalysisStack,
        },
        DailySalesAnalysis: {
            screen: DailySalesAnalysisStack,
        },
    },
    {
        contentComponent:SalesSlideMenu,
        drawerType: 'slide',
        drawerWidth:230*REM,
    }
    );

...skip...

    /// BOTTOM TAB
    export default createAppContainer(createBottomTabNavigator(
        {
            MainStack:MainStack,
            ApprovalStack:ApprovalStack,
            SalesStack:SalesStack,
            OrganizationStack:OrganizationStack,
            SettingStack:SettingStack,
        },
        {
          tabBarComponent: TabBar,
        }
    ));

2) tabBar.js

const TAB_LIST = [
    require('../../resources/images/tabIcon_main.png'),
    require('../../resources/images/tabIcon_approval.png'),
    require('../../resources/images/tabIcon_sales.png'),
    require('../../resources/images/tabIcon_organization.png'),
    require('../../resources/images/tabIcon_settings.png'),
];

export default class TabBar extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {      
        console.log("[TabBar.js] : Render ====");

        const {
            onTabPress,
            navigation
        } = this.props;

        const { routes, index: activeRouteIndex } = navigation.state;

        return (
            <SafeAreaView style={{backgroundColor:'rgb(250,250,250)'}}>
                <View style={styles.rootContainer}>
                {routes.map((route, routeIndex) => {
                    const isRouteActive = routeIndex === activeRouteIndex;
                    return (
                        <TouchableWithoutFeedback key={routeIndex} onPress={() => {onTabPress({ route });}}>
                            <View style={styles.tabIconContainer}>
                                <Image style={[styles.icon,isRouteActive&&{tintColor:'black'}]} source={TAB_LIST[routeIndex]} resizeMode={'contain'}/>
                                {/* <View style={[styles.badge]}><Text style={[styles.text,styles.badgeNumber]}>12</Text></View> */}
                            </View>
                        </TouchableWithoutFeedback>
                    );
                })}
                </View>
            </SafeAreaView>
        );
    }
}

3) SlideMenu.js

const MENU_LIST = [
   {'icon':require('../../resources/images/dailySales.png'),'label':'Daily Sales','subLabel':'','route':'DailySales'},
   {'icon':require('../../resources/images/rivalRank.png'),'label':'Daily Rival Rank','subLabel':'','route':'DailyRivalRank'},
   {'icon':require('../../resources/images/salesAnalysis.png'),'label':'Sales Analysis','subLabel':'','route':'SalesAnalysis'},
   {'icon':require('../../resources/images/dailySalesAnalysis.png'),'label':'Daily Sales Analysis','subLabel':'','route':'DailySalesAnalysis'},
]

class SlideMenuTab extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <View style={{flex:0}}>
                <TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate(this.props.data.route+"Main")}>
                    <View style={[styles.tabContainer,this.props.focused&&{backgroundColor:'rgb(247,247,247)'}]}>
                        <Image style={styles.tabIcon} source={this.props.data.icon} resizeMode={'contain'}/>
                        <View style={styles.labelContainer}>
                            <Text style={[styles.text,styles.label]}>{this.props.data.label}</Text>
                            <Text style={[styles.text,styles.subLabel]}>{this.props.data.subLabel}</Text>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

export default class SalesSideMenu extends React.Component {
    constructor(props) {
        super(props);
        console.log("[SalesSideMenu.js] : Constructor");
    }

    render() {
        console.log("[SalesSideMenu.js] : render ====");
        let menuList = [];

        MENU_LIST.forEach((data)=>{
            let focused = this.props.activeItemKey === data.route;
            menuList.push(
                <SlideMenuTab data={data} focused={focused} navigation={this.props.navigation}/>
            );
        })

        return (
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <View style={styles.rootContainer}>
                    {menuList}
                </View>
            </SafeAreaView>
        );
    }

}

4) Экран с выдвижным ящиком

export default class DailySalesMain extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {
        console.log("[DailySalesMain.js] : render ====");
        return (
            <View style={{flex:1,backgroundColor:'white',alignItems:'center',justifyContent:'center'}}>
                <TouchableWithoutFeedback onPress={()=>this.props.navigation.openDrawer()}>
                    <View style={{width:'100%',height:50}}>
                        <View style={{width:50,height:50,backgroundColor:'blue'}}></View>
                    </View>
                </TouchableWithoutFeedback>
                <Text>DailySalesMain</Text>
            </View>
        );
    }

}