如何設置「反應母語抽屜」可見只有儀表盤登錄後在反應母語

Question

在反應本地的，我想在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屏幕可能的方式。

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表示和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>