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（）即可，该加载由我使用{{1}中的TabNavigator实现的底部标签栏加载} 选项卡切换完美地工作，没有任何问题。

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

react-native-tab-navigator

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

请求一些帮助。任何帮助和解决此问题的指示都将不胜感激。

谢谢，维克拉姆

Answer 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>

具有底表栏导航的React-Native-Router-flux导航俱乐部抽屉

1 个答案: