如何设置“反应母语抽屉”可见只有仪表盘登录后在反应母语

问题描述：

在反应本地的，我想在Dashboard屏幕上Login禁用抽屉，抽屉启用。我已实施'react-native-drawer'与 Navigator在路线之间导航。如何设置“反应母语抽屉”可见只有仪表盘登录后在反应母语

渲染方法如下：

render() { 
     <Drawer 
       ref={(ref) => this._drawer = ref} 
       disabled={!this.state.drawerEnabled} 
       type="overlay" 
       content={<Menu navigate={(route) => { 
        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 } 
       })}> 
       <Navigator 
        ref={(ref) => this._navigator = ref} 
        configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft} 
        initialRoute={{ 
         id: 'Login', 
         title: 'Login', 
         index: 0 
        }} 
        renderScene={(route, navigator) => this._renderScene(route, navigator)} 
        navigationBar={ 
         <Navigator.NavigationBar 
          style={styles.navBar} 
          routeMapper={NavigationBarRouteMapper} /> 
        } 
       /> 
      </Drawer> 
    ); 
    }

renderScene如下导航路线：

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

      case 'Dashboard': 
        return (<Dashboard navigator={navigator}/>); 
     } 
    }

我已经写一个方法来启用和在反应禁用抽屉-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屏幕可能的方式。

答

你必须改变你的_renderScene()方法如下：

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

没有必要navigate()方法的，所以删除方法。所有的情况下，你必须写作为你的需要和default case你已经把它设置为null。如果您正在设置null表示和right在Dashboard页面上被禁用，但只有title在Dashboard上启用。

你需要编写代码为left，right和title上toolbar如下：

const NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
     switch (route.id) { 
      case 'Dashboard': 
       return (
        <TouchableOpacity 
         style={styles.navBarLeftButton} 
         onPress={() => {_emitter.emit('openMenu')}}> 
         <Icon name='menu' size={25} color={'white'} /> 
        </TouchableOpacity> 
       ) 
      default: 
       return null //For setting Dashboard left button null 
     } 
    }, 
    RightButton(route, navigator, index, navState) { 
     switch (route.id) { 
      case 'Dashboard': 
      return (
      <TouchableOpacity 
       style={styles.navBarRightButton} onPress={() => {route.onPress()}}> 
       <Icon name={'map'} size={25} color={'white'} /> 
      </TouchableOpacity> 
      ) 
      default: 
       return null //For setting Dashboard right button null 
      } 
    }, 
    Title(route, navigator, index, navState) { 
     return (
      <Text style={[styles.navBarText, styles.navBarTitleText]}> 
       {route.title} 
      </Text> 
     ) 
    } 
}

精湛。其实现在我可以说。我在自己的战略中犯了一个错误。我实际上是在不同的页面上添加抽屉，这需要抽屉。 – SSS

答

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

像这样的事情

<Drawer> 
    panOpenMask={isItLoginPage? 0 : 0.2} 
    panCloseMask={isItLoginPage? 0 : 0.2} 
    ... 
</Drawer>

如何设置“反应母语抽屉”可见只有仪表盘登录后在反应母语

相关推荐