Comment configurer « réagir-tiroirs natif » visible uniquement au tableau de bord après la connexion en réaction natif

Question

En réagir natif, je veux désactiver le tiroir sur Login et activer le tiroir sur Dashboard écran. J'ai mis en œuvre 'react-native-drawer' avec Navigator pour naviguer entre les routes.

rendre procédé comme suit:

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 comme suit pour naviguer dans les voies:

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

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

Je vous ai écrit une méthode pour activer et tiroir désactiver à réagir -natif:

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); 
     } 
} 

Initialement j'ai défini la propriété dans la classe et dans le constructeur, la méthode de navigation a été appelée.

state = {drawerEnabled:true, navigationBarEnabled: true}; 

    constructor(){ 
    super(); 
    this.navigate = this.navigate.bind(this); 
    } 

Ensuite, ce qui serait ainsi possible de désactiver le tiroir dans le menu Login et activer sur Dashboard écran.

Answer 1

Vous devez changer votre méthode _renderScene() comme suit:

_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} />); 
     } 
    } 

Il n'y a pas besoin de méthode navigate(), donc enlever cette méthode. Tous les cas, vous devez écrire comme votre besoin et pour default case vous l'avez défini comme null. Si vous définissez null signifie left et right sont désactivés sur la page Dashboard mais seulement title est activé sur Dashboard.

Vous devez écrire un code pour left, right et title sur toolbar comme suit:

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

Vous pouvez définir les propriétés panOpenMask et panCloseMask du tiroir sur 0 dans la scène de connexion.

Quelque chose comme ça

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