0

尽管有很多关于 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() ，我已经使用TabNavigatorfromreact-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>

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

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

谢谢，维克拉姆

4

1 回答 1

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>
于 2019-07-11T11:55:00.073 回答