Как установить «реагировать нативный ящик» виден только на панель управление после входа в реакцию родного

Question

В реакцию родной, я хочу, чтобы отключить ящик на Login и включить ящик на Dashboard экране. Я применил '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}/>); 
     } 
    } 

Я написал один метод для включения и отключения ящик в реакции -натив:

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 (<Login navigator={navigator} {...route.passProps} />); 
      case 'Dashboard': 
       return (<Dashboard navigator={navigator} {...route.passProps} />); 
     } 
    } 

Там нет необходимости navigate() метода, поэтому удалить этот метод. Все случаи, которые вы должны написать в качестве своей потребности, а для default case вы указали ее как null. Если вы устанавливаете null, значит, left и 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> 
     ) 
    } 
} 

Answer 2

Вы можете установить panOpenMask и panCloseMask свойства ящика на 0 при регистрации.

Что-то вроде этого

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