两侧的 React-Native DrawerNavigator 菜单 [英] React-Native DrawerNavigator Menu on both sides

问题描述

我有一个带有 DrawerNavigator 的 React Native 应用程序.对于菜单，我有自己的组件.这很好用.现在我想在右侧添加第二个侧边菜单.是否可以像 Slack 应用程序中那样拥有两个 DrawerNavigator?此解决方案对我不起作用:https://snack.expo.io/ry7lYempe因为我不想有一个 TabController 作为父级.两个 Drawer 都应该可以在所有屏幕中访问.

I have a react native app with a DrawerNavigator. For the menu I have my own component. That works great. Now I want to add a second side menu on the right side. Is it possible to have two DrawerNavigator like in the Slack App? This solution is not working for me: https://snack.expo.io/ry7lYempe because I don't want to have a TabController as parent. Both Drawer should be accessible in all screens.

我的代码如下所示:

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 到最新版本后解决.

Solved after updating react-navigation to the newest version.

推荐答案

你可以添加任何你想要的抽屉，看看这个例子 https://snack.expo.io/BJoChzewM

you can add any drawer you want, take a look at this exemple https://snack.expo.io/BJoChzewM

在您的情况下，您可以在另一个 DrawerNavigator 组件中添加您的MainNavigator".不要忘记设置 drawerOpenRoute/drawerCloseRoute 以防止任何副作用.

In your case, you may add your "MainNavigator" in another DrawerNavigator Component. don't forget to set drawerOpenRoute/drawerCloseRoute to prevent any side effects.

这篇关于两侧的 React-Native DrawerNavigator 菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！