带有底部标签栏导航的 React-native-router-flux 导航俱乐部抽屉答案

【问题标题】：React-native-router-flux navigation clubbing drawer with bottomtab bar navigation带有底部标签栏导航的 React-native-router-flux 导航俱乐部抽屉
【发布时间】：2018-09-27 06:56:39
【问题描述】：

虽然有很多关于 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()，我使用来自 react-native-tab-navigator 的 TabNavigator 实现了它选项卡切换完美无问题。

现在我想添加更多屏幕并且添加更多选项卡不是一个选项，因为我已经有 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>

到我现有的路线，但没有任何反应。我尝试了太多东西，但都失败了。

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

谢谢，维克拉姆

【问题讨论】：

标签： react-native navigation-drawer react-native-navigation react-native-router-flux react-native-tabnavigator

【解决方案1】：

参考下面的代码，在 Drawer 的 '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>

【讨论】：