如何在反应路由器通量中隐藏抽屉？答案

【问题标题】：how to hide drawer in react router flux?如何在反应路由器通量中隐藏抽屉？
【发布时间】：2020-02-21 17:44:58
【问题描述】：

嘿，我正在使用 React Native 项目，我正在使用 React Router Flux 进行导航，我使用 Drawer，那么如何在某些屏幕中禁用抽屉？喜欢登录屏幕？

我尝试了 drawerLockMode={'lock-closed'} 但它不起作用

这是我的代码

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

【问题讨论】：

您是否尝试将drawerLockMode 传递给每个单独的场景？
是的，我试过了，但没用
你能展示一下你到目前为止所做的尝试并把它放在上面的代码中吗？我的意思是通过lock-closed 用于禁用场景，unlocked 用于启用场景。

标签： react-native react-native-router-flux

【解决方案1】：

您需要在主要场景中编写drawerLockMode..类似的东西

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

如果您想在不同的场景中锁定/解锁，您需要将要锁定/解锁抽屉的每组场景与父场景分开......

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

希望对我有所帮助... :)

【讨论】：