Question

我使用DrawerLayout作为我项目的一部分，但我不想让用户在某些页面中打开抽屉，我找不到禁用它的选项。有什么诀窍吗？。

这是我代码的一部分：

 return (
 <DrawerLayout
 drawerWidth={300}
 ref="drawer"
 renderNavigationView={() => navigationView}> 
 <Router hideNavBar={true}>
 <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
 <Route initial={true} name="empty" component={Empty}/>
 <Route name="login" component={Login} onLoginSuccess={()=>{this.onLoginSuccess()}}/>
 <Route name="pages">
 <Router footer={Footer} header={Header} hideNavBar={true}>
 <Route name="issues" initial={true} component={Issues} title={"123"}/>
 <Route name="analytics" component={Analytics} title={"456"}/>
 </Router>
 </Route>
 </Router>
 </DrawerLayout>
 );

Answer 1

如果路由器支持嵌套路由，则只能将它们包含在DrawerLayout中，以供那些需要它的人使用。和其他兄弟姐妹的路线。

<Router>
   <Route>
      <DrawerLayout>
          <Route/>
          <Route/>
     </DrawerLayout>
   </Route>
   <Route/>
   <Route/>
</Router>

如果路由器不支持嵌套路由，您可以在顶部使用2个不同的导航器，在需要DrawerLayout的所有路由中使用一个。

<Navigator ref="navigator" style={styles.navigator} initialRoute={{
        name: 'Home',
        index: 0
      }} renderScene={this.renderScene.bind(this)}  configureScene={this.configureScene}
      />

  renderScene(route, navigator) {
    switch (route.name) {
      case 'Home':{
        return (<DrawerLayout>
                 <Navigator />
               </DrawerLayout>)
        }
      case 'Route2': {
        return <Route2 navigator={navigator}/>
        }
.......
    }
  }

Answer 2

在0.22.0-rc中有一个新的propLockLockMode，可以锁定抽屉。

http://facebook.github.io/react-native/releases/0.22/docs/drawerlayoutandroid.html#drawerlockmode

Answer 3

通过将default值设为null，drawer被禁用。

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

React Native：禁用Android抽屉

3 个答案: