[英]React-Native DrawerNavigator Menu on both sides
I have a react native app with a DrawerNavigator. 我有一个带有DrawerNavigator的React本机应用程序。 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? 是否可以在Slack App中拥有两个DrawerNavigator? This solution is not working for me: https://snack.expo.io/ry7lYempe because I don't want to have a TabController as parent. 此解决方案不适用于我: https : //snack.expo.io/ry7lYempe,因为我不想将TabController作为父项。 Both Drawer should be accessible in all screens. 在所有屏幕中都应可以访问两个抽屉。
My code looks like this: 我的代码如下所示:
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
}
);
Solved after updating react-navigation to the newest version. 在将react-navigation更新为最新版本后解决。
you can add any drawer you want, take a look at this exemple https://snack.expo.io/BJoChzewM 您可以添加任何所需的抽屉,看看这个示例https://snack.expo.io/BJoChzewM
In your case, you may add your "MainNavigator" in another DrawerNavigator Component. 根据您的情况,您可以在另一个DrawerNavigator组件中添加“ MainNavigator”。 don't forget to set drawerOpenRoute/drawerCloseRoute to prevent any side effects. 不要忘了设置抽屉打开路线/抽屉关闭路线,以防止任何副作用。
@KamleshKatpara Here is my solution (I nested the two navigators): @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'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.