反应母语DrawerNavigator菜单两侧

问题描述 投票:0回答:2

我有一个反应本机应用程序与DrawerNavigator。对于菜单,我有我自己的组件。这伟大工程。现在,我想添加在右侧的第二侧面菜单。是否有可能有两个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
    }
);

更新反应导航到最新版本后问题。

javascript reactjs react-native react-navigation react-native-ios
2个回答
2
投票

你可以添加任何你想要的抽屉,看看本例https://snack.expo.io/BJoChzewM

就您的情况,您可以添加在另一个DrawerNavigator组件的“MainNavigator”。不要忘记设置drawerOpenRoute / drawerCloseRoute,以防止任何副作用。


0
投票

@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'
});
© www.soinside.com 2019 - 2024. All rights reserved.