how to hide drawer in react router flux?

我怕爱的太早我们不能终老 提交于 2020-04-16 02:48:11

问题


hey there i am working with react native project and i am using react router flux for navigation and i use Drawer so how can i disable the drawer in some screens ? like signin screen ?

i tried drawerLockMode={'lock-closed'} but it's not working

here is mycode

 <RouterRedux backAndroidHandler={() => {}}>
      <Drawer>
        <Scene key="root" hideNavBar transitionConfig={transitionConfig}>
          <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
          <Scene
            initial
            key="CheckAuth"
            component={CheckAuth}
            type={ActionConst.RESET}
          />
          <Scene key="SignIn" component={SignIn} />
          <Scene key="ResetPassword" component={ResetPassword} />
          <Scene key="Visits" component={Visits} />
          <Scene key="VisitDetails" component={VisitDetails} />
          <Scene key="Statistiques" component={Statistiques} />
        </Scene>
      </Drawer>
    </RouterRedux>

回答1:


You need to write the drawerLockMode in the principal scene.. something like that

<RouterRedux backAndroidHandler={() => {}}>
  <Drawer>
    <Scene 
       key="root" 
       hideNavBar 
       transitionConfig={transitionConfig}
       drawerLockMode='locked-closed' //New line
     >
      <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
      <Scene
        initial
        key="CheckAuth"
        component={CheckAuth}
        type={ActionConst.RESET}
      />
      <Scene key="SignIn" component={SignIn} />
      <Scene key="ResetPassword" component={ResetPassword} />
      <Scene key="Visits" component={Visits} />
      <Scene key="VisitDetails" component={VisitDetails} />
      <Scene key="Statistiques" component={Statistiques} />
    </Scene>
  </Drawer>
</RouterRedux>

If you want to lock/unlock in different scenes you need to separate with a parent Scene each group of Scenes that you want to lock/unlock the drawer...

<RouterRedux backAndroidHandler={() => { }}>
    <Drawer
        hideNavBar
        open={false}
        key="drawer"
        contentComponent={SideBar}
        drawerWidth={300}
    // drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
    >
        <Scene
            key="root" hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='locked-closed'
        >
            <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
            <Scene
                initial
                key="CheckAuth"
                component={CheckAuth}
                type={ActionConst.RESET}
            />
        </Scene>
        <Scene
            key="root2"
            hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='unlocked'
        >
            {/*<Scene key="WIP" component={WorkInProgress} />*/}
            <Scene key="SignIn" component={SignIn} />
            <Scene key="ResetPassword" component={ResetPassword} />
            <Scene key="Visits" component={Visits} />
            <Scene key="VisitDetails" component={VisitDetails} />
            <Scene key="Statistiques" component={Statistiques} />
            <Scene key="Notification" component={Notification} />
            <Scene key="Sync" component={Sync} />
        </Scene>
    </Drawer>
</RouterRedux>

I hope I've helped ... :)



来源:https://stackoverflow.com/questions/60343846/how-to-hide-drawer-in-react-router-flux

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!