Ящик для клубов React-native-router-flux navigation с нижней панелью навигации

Question

Несмотря на то, что существует много сведений о реагировании на родной-маршрутизатор-флюс и навигацию по выдвижным ящикам, я не могу понять, как мне свернуть мою существующую навигацию по нижней панели с боковым выдвижным ящиком.

Текущие маршруты, которые у меня есть

      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' в Drawer вы можете создать свой собственный ящик и передать его на 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>