React native React本机抽屉（适用于iOS和Android）禁用/抽屉锁定模式不工作

我是React原生开发新手，我使用以下教程和github示例完成了抽屉功能：-

因此，根据上面的链接

抽屉组件

有一个

禁用

参数，有助于锁定抽屉

就我而言，我有：-

• 登录页面：-

  所以当用户未登录系统时，我尝试锁定抽屉

• 主页：-

  因此，当用户成功登录时，我已打开此页面并解锁抽屉

添加了

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

render（）{
这个.\u drawer=ref}
disabled={！this.state.drawerEnabled}
type=“覆盖”
内容={{
这个._navigator.push（navigationHelper（route））；
这个._drawer.close（）
}}/>}
tapToClose={true}
OpenDrawerofset={0.2}
panCloseMask={0.2}
closeddrawrofset={-3}
风格={{
抽屉：{阴影颜色：'#000000'，阴影不透明度：0.8，阴影半径：3}，
main:{paddingLeft:3}
}}
tweenHandler={（比率）=>({
main:{不透明度：（2-比率）/2}
})}>
这是.\u navigator=ref}
configureScene={（路由）=>Navigator.SceneConfigs.FloatFromLeft}
初始路线={{
id:'登录'，
标题：“登录”，
索引：0
}}
renderScene={（路由，导航器）=>这个。\u renderScene（路由，导航器）}
导航栏={
}
/>
);
}

所以，我的问题是：-

disabled

参数不起作用。我也尝试过使用“setState（）”函数，但结果相同

请向我推荐其他适用于上述情况的抽屉示例/教程

检查并找到“抽屉锁模式”

我认为这是最好的选择。它是完全可定制的，支持Android和IOS。你应该使用

这里我添加了代码示例，说明如何锁定/解锁抽屉

这里StackApp将是您的堆栈导航器，其中包含所有 抽屉页

StackApp.navigationOptions=（{navigation}）=>{
让抽屉锁模式为“解锁”；
如果（navigation.state.index>0）{
DroperLockMode='locked closed'；//对于子页，它将锁定抽屉
}
返回{
抽屉锁模式
};
};
const DrawerStack=createDrawerNavigator({
StackHome:{屏幕：StackApp}，
//Auth:{screen:AuthScreen}，
}
,{
抽屉宽度：宽度*0.8，
contentComponent：（道具）=>
});

但是这个抽屉布局只能在Android中使用。我必须设计一个可以在iOS和Android上使用的抽屉。这里的代码是“disabled={！this.state.drawerEnabled}”，这里有“！”马克，你没有打错字吗？以防万一，

drawerEnabled

是导航期间使用的变量。在页面之间切换时，该变量设置为true/false。我也将此参数直接设置为

true

，但得到相同的结果

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