反应本机路由器通量导航抽屉与底部标签栏导航

Question

尽管存在很多关于 react-native-router-flux 和抽屉导航的线索，但我似乎无法弄清楚如何将我现有的底部选项卡栏导航与侧抽屉结合起来。

我目前拥有的路线

import React from 'react'
import { Scene, Router, Actions, ActionConst } from 'react-native-router-flux'
import LoginConnector from '../connectors/LoginConnector'
import BottomTabbarConnector from '../connectors/BottomTabbarConnector'
import Logout from '../layouts/login/Logout'
import SelectionModal from '../layouts/login/SelectionModal'

const scenes = Actions.create(
<Scene key="root">
<Scene key="login" component={LoginConnector} initial={true} hideNavBar/>
<Scene key="selectionModal" component={SelectionModal} type={ActionConst.REPLACE} hideNavBar />
<Scene key="logout" component={Logout} type={ActionConst.REPLACE} hideNavBar />
<Scene key="bottomtabbar" component={BottomTabbarConnector} type={ActionConst.REPLACE} hideNavBar />
</Scene>
);
export default () => (
<Router scenes={scenes} />
);

所以发生的事情是我在应用程序启动时加载登录屏幕，然后在成功登录后，我只需调用 Actions.bottombar(( 它通过底部选项卡栏加载，我已经使用TabNavigator从react-native-tab-navigator中实现 标签切换完美运行，没有任何问题。

现在我想添加更多屏幕，添加更多选项卡不是一个选项，因为我已经有 5 个选项卡。所以我想实现侧抽屉。而且我无法弄清楚如何配置我的路由，以便在成功登录后，除了侧抽屉外，我继续保持底部标签栏完好无损。侧抽屉将有更多屏幕导航选项进行选择，转到我尝试添加的相应屏幕

<Drawer
type="static"
content={<Menu closeDrawer={ () => this.drawer.close() }/>}
openDrawerOffset={100}
tweenHandler={Drawer.tweenPresets.parallax}
tapToClose={true}
ref={ (ref) => this.drawer = ref}
>
<Router>
<Scene key="gallery" />
<Scene key="logout" />
</Scene>
</Router>
</Drawer>

到我现有的路线，但什么也没发生。我尝试了太多的事情，但都失败了。

请求一些帮助。非常感谢解决此问题的任何帮助和指示。

谢谢 维克拉姆

Answer 1

请参考下面的代码，在抽屉的"contentComponent"中，您可以设计自己的抽屉并传递给contentComponent，如下所示。 希望这段代码对您有所帮助。

import SideMenu from '../Component/SideMenu'
<Router>
<Stack>
<Scene hideNavBar>
<Scene initial>
<Scene
hideNavBar
key="mainApp"
drawerIcon={
<Icon
name="menu"
size={25}
color="white"
onPress={() => Actions.drawerOpen()}
/>
}
drawer
contentComponent={SideMenu}
>
<Scene
initial
key="tab"
wrap={false}
tabBarPosition="bottom"
showLabel={false}
tabs
type={ActionConst.REPLACE}
tabBarStyle={{ backgroundColor: Constants.colors.themeColor }}
>
<Scene>...........</Scene>
<Scene>...........</Scene>
<Scene>...........</Scene>
<Scene>...........</Scene>
<Scene>...........</Scene>
</Scene>
</Scene>
</Scene>
</Stack>
</Router>