在react-native中登录后，如何将“react-native-drawer”设置为仅对Dashboard可见

在本机反应中，我想在Login禁用抽屉并在Dashboard屏幕上启用抽屉。 我已经使用Navigator实现了'react-native-drawer'来在路线之间导航。

渲染方法如下：

 render() {  this._drawer = ref} disabled={!this.state.drawerEnabled} type="overlay" content={ { this._navigator.push(navigationHelper(route)); this._drawer.close() }}/>} tapToClose={true} openDrawerOffset={0.2} panCloseMask={0.2} closedDrawerOffset={-3} styles={{ drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3}, main: {paddingLeft: 3} }} tweenHandler={(ratio) => ({ main: { opacity:(2-ratio)/2 } })}>  this._navigator = ref} configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft} initialRoute={{ id: 'Login', title: 'Login', index: 0 }} renderScene={(route, navigator) => this._renderScene(route, navigator)} navigationBar={  } />  ); } 

renderScene如下导航路线：

 _renderScene(route, navigator) { navigator.navigate = self.navigate; switch (route.id) { case 'Login': return (  ); case 'Dashboard': return (  ); } } 

我写了一个方法来启用和禁用react-native中的抽屉：

 navigate(route, method){ if(route) switch (route.id) { case 'Login': this.state = {drawerEnabled: false, navigationBarEnabled: false}; break; case 'Dashboard': this.state = {drawerEnabled: true, navigationBarEnabled: true}; break; } this.forceUpdate(); this.refs.navigator[method](route); } } 

最初我在类和构造函数中设置了属性，调用了导航方法。

 state = {drawerEnabled:true, navigationBarEnabled: true}; constructor(){ super(); this.navigate = this.navigate.bind(this); } 

然后，这将是在Login菜单上禁用抽屉并在Dashboard屏幕上启用它的可能方法。

Answer 1

您必须更改_renderScene()方法，如下所示：

 _renderScene(route, navigator) { navigator.navigate = this.navigate; switch (route.id) { case 'Login': return (  ); case 'Dashboard': return ( ); } } 

不需要navigate()方法，因此请删除该方法。 您必须根据需要编写所有情况，并且在default case将其设置为null 。 如果设置为null表示在Dashboard页面上禁用left ，但在Dashboard仅启用title 。

您需要在toolbar上为left ， right和title编写代码，如下所示：

 const NavigationBarRouteMapper = { LeftButton(route, navigator, index, navState) { switch (route.id) { case 'Dashboard': return (  {_emitter.emit('openMenu')}}>   ) default: return null //For setting Dashboard left button null } }, RightButton(route, navigator, index, navState) { switch (route.id) { case 'Dashboard': return (  {route.onPress()}}>   ) default: return null //For setting Dashboard right button null } }, Title(route, navigator, index, navState) { return (  {route.title}  ) } } 

Answer 2

您可以在登录场景panCloseMask抽屉的panOpenMask和panCloseMask属性设置为0。

像这样的东西

  panOpenMask={isItLoginPage? 0 : 0.2} panCloseMask={isItLoginPage? 0 : 0.2} ...