两侧都有React-Native DrawerNavigator菜单

Question

我有一个带有DrawerNavigator的React本机应用程序。 对于菜单，我有自己的组件。 效果很好。 现在，我想在右侧添加第二个菜单。 是否可以在Slack App中拥有两个DrawerNavigator？ 此解决方案不适用于我： https : //snack.expo.io/ry7lYempe，因为我不想将TabController作为父项。 在所有屏幕中都应可以访问两个抽屉。

我的代码如下所示：

import React from 'react'
import reducer from './src/reducers'
import { DrawerNavigator } from 'react-navigation';
import SidebarMenu from './src/components/layout/SidebarMenu'

import { createStore } from 'redux';
import { Provider } from 'react-redux';

let store = createStore(reducer);

import News from './src/screens/News'
import HowTo from './src/screens/HowTo'


export default class MyApp extends React.Component {

    render() {

        return (
            <Provider store={store}>
                <MainNavigator />
            </Provider>
        );
    }
}

const MainNavigator = DrawerNavigator(
    {
        News: {
            path: '/news',
            screen: News
        },
        HowTo: {
            path: '/howto',
            screen: HowTo
        }
    },
    {
        initialRouteName: 'News',
        drawerPosition: 'left',
        contentComponent: SidebarMenu
    }
);

在将react-navigation更新为最新版本后解决。

Answer 1

您可以添加任何所需的抽屉，看看这个示例https://snack.expo.io/BJoChzewM

根据您的情况，您可以在另一个DrawerNavigator组件中添加“ MainNavigator”。 不要忘了设置抽屉打开路线/抽屉关闭路线，以防止任何副作用。

Answer 2

@KamleshKatpara这是我的解决方案（我嵌套了两个导航器）：

const DrawerExample = DrawerNavigator(
    {
        Home: {
            path: '/',
            screen: Home
        }
    },
    {
        initialRouteName: 'Home',
        drawerPosition: 'left',
        contentComponent: SidebarMenu
    }
);

const MainDrawerExample = DrawerNavigator({
    Drafts: {
        screen: DrawerExample,
    }
}, {
    drawerPosition: 'right',
    contentComponent: BookmarkMenu,
    drawerOpenRoute: 'DrawerRightOpen',
    drawerCloseRoute: 'DrawerRightClose',
    drawerToggleRoute: 'DrawerRightToggle'
});