React 本机抽屉（对于 iOS & Android）disable/drawerLock 模式不工作

Question

我是 React 本机开发的新手，我已经使用以下教程和 github 示例完成了抽屉功能：-

所以，根据上面link Drawer component 有一个 disable 参数可以帮助锁定抽屉

就我而言，我有：-

Login Page :- 所以我试图在用户未登录系统时锁定抽屉。
Home Page :- 所以当用户成功登录时，我打开这个页面并解锁我的抽屉。

添加render()方法供参考：-

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

所以，我的问题是：-

disabled 参数不是 working.I 也尝试过使用 `setState()' 函数，但结果是一样的。
请给我推荐其他适用于上述情况的抽屉 examples/tutorials。

Answer 1

检查 react native documentation 并找到“drawerLockMode”

Answer 2

我觉得React Navigation library is best option. Which is fully customizable and supported both Android and IOS. You should use Drawer Navigator, can get documentation here.

我在这里添加代码示例，即我如何 locked/unlocked 抽屉。

Here StackApp will be your Stack Navigator which contain all the drawer pages.

StackApp.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) {
    drawerLockMode = 'locked-closed'; //For child page it will lock drawer
  }
  return {
    drawerLockMode
  };
};
const DrawerStack = createDrawerNavigator({
  StackHome: {screen: StackApp},
  // Auth: {screen: AuthScreen},
}
,{
  drawerWidth:width*0.8,
  contentComponent: (props) =>
    <ScrollView>
      <Menu {...props}/>
    </ScrollView>
});

React 本机抽屉（对于 iOS & Android）disable/drawerLock 模式不工作

React native drawer (for iOS & Android) disable/drawerLock mode not working

navigator

drawer

react-native