React native 禁用react native中的侧菜单抽屉

React native 禁用react native中的侧菜单抽屉,react-native,react-navigation,React Native,React Navigation,我使用react本机创建了一个带有侧菜单的页面,并使用react导航进行路由。我想禁用通过左侧滑动手势显示的侧菜单屏幕 export const StackNav=StackNavigator( { 登录:{ 屏幕:登录, 导航选项:{ headerMode:“无”, 标题:空 } }, 报名:{ 屏幕:注册, 导航选项:{ headerMode:“无”, 标题:空 } }, }, { initialRouteName:“登录” } ); //对于管理员登录,请运行活动 const TabNav

我使用react本机创建了一个带有侧菜单的页面,并使用react导航进行路由。我想禁用通过左侧滑动手势显示的侧菜单屏幕

export const StackNav=StackNavigator(
{
登录:{
屏幕:登录,
导航选项:{
headerMode:“无”,
标题:空
}
},
报名:{
屏幕:注册,
导航选项:{
headerMode:“无”,
标题:空
}
},
},
{
initialRouteName:“登录”
}
);
//对于管理员登录,请运行活动
const TabNav1=TabNavigator(
{
选择承运人:{
屏幕:选择承运人,
导航选项:{
tabBarLabel:“选择承运商”
}
},
错误记录:{
屏幕:错误记录,
导航选项:{
tabBarLabel:“错误记录”
}
}
},
{
tabbar位置:“顶部”,
选项卡选项:{
标签样式:{
fontWeight:“粗体”
}
}
}
);
//用于通知页面或运营商登录
const TabNav=TabNavigator(
{
通知:{
屏幕:通知,
导航选项:{
tabBarLabel:“通知”
}
},
通知历史:{
屏幕:通知历史,
导航选项:{
tabBarLabel:“通知历史记录”
}
}
},
{
tabbar位置:“底部”
}
);
const TabNavStack=StackNavigator({
主要内容:{
屏幕:TabNav,
导航选项:({navigation})=>({
标题:“通知”
})
}
});
const sidemenunan=StackNavigator({
仪表板:{
屏幕:仪表板,
导航选项:({navigation})=>({
左校长:(
navigation.toggleDrawer()}>
)
})
},
浏览排名:{
屏幕:查看排名,
导航选项:({navigation})=>({
标题:“查看排名”
})
},
选择承运人:{
屏幕:选择承运人,
导航选项:({navigation})=>({
标题:“选择承运人”
})
},
RunCampaign:{
屏幕:RunCampaign,
导航选项:({navigation})=>({
标题:“跑步”
})
},
选定活动:{
屏幕:SelectedCampaign,
导航选项:({navigation})=>({
标题:“选定活动”,
})
},
更改密码:{
屏幕:更改密码,
导航选项:{
标题:“更改密码”
}
},
电子邮件分析:{
屏幕:EmailAnalytics,
导航选项:{
标题:“电子邮件分析”
}
},
查看活动历史:{
屏幕:查看活动历史,
导航选项:{
标题:“查看活动历史记录”
}
},
检查响应:{
屏幕:CheckResponse,
导航选项:{
标题:“检查响应”
}
},
活动结果:{
屏幕:活动结果,
导航选项:{
标题:“竞选结果”
}
},
});
常数paurernav=paurernavigator(
{
项目1:{
屏幕:Sidemenunna
}
},
{
contentComponent:侧菜单,
抽屉宽度:尺寸。获取(“窗口”)。宽度-120
}
);
导出常量PrimaryNav=StackNavigator(
{
StackNav:{屏幕:StackNav},
TabNavStack:{屏幕:TabNavStack},
抽屉病毒:{屏幕:抽屉病毒}
},
{
//所有屏幕的默认配置
headerMode:“无”,
初始路由名称:“StackNav”
}
);
因此,在SideMenuna中,我想禁用视图排名的侧抽屉,选择Carriers

我尝试了带有导航选项的
drawerLockMode
,但没有成功

我提到了一些问题,但没有用


建议答案后,将其标记为重复或否决

drawerLockMode
是您要查找的选项。(无抽屉锁模)

指定抽屉的锁定模式。这也可以通过在顶级路由器上使用screenProps.drawerLockMode动态更新

有三种选择

  • 解锁(默认),意味着抽屉将响应(打开/关闭)触摸手势
  • 锁定关闭,意味着抽屉将保持关闭状态,不响应手势
  • 锁定打开,意味着抽屉将保持打开状态,不响应手势。抽屉仍然可以通过编程方式打开和关闭(openDrawer/closeDrawer)
因此,在
sidemenuNav
的导航选项中添加条件语句

这是我经过测试的代码

const AuthStackNavigation=createStackNavigator({
主页:主屏幕,
登录堆栈:主屏幕,
注册表堆栈:主屏幕,
}, {
initialRouteName:“HomeStack”,
导航选项:{
手势已启用:错误,
},
})
AuthStackNavigation.navigationOptions=({navigation})=>{
让抽屉锁模式为“解锁”;
如果(navigation.state.key>0){
抽屉锁模式='锁定关闭';
}
返回{
抽屉锁模式,
};
};
const DashboardStack=createStackNavigator({
仪表板:{
屏幕:仪表板,
}
})
const DrawerNav=createDrawerNavigator({
AuthStackNavigation:{
屏幕:AuthStackNavigation,
//导航选项:{
//手势已启用:错误,
//抽屉锁定模式:“锁定关闭”
// }
},
仪表板堆栈:{
屏幕:仪表板堆栈,
},
第三屏:仪表板,
})
...
const MainNavigation=createSwitchNavigator({
出纳人:出纳人,
选项卡:选项卡导航组件,
AuthStack:AuthStackNavigation,//您将在登录过程后使用此.props.navigation.replace('HomeDrawer')。
})
导出默认主导航//堆栈、抽屉、开关导航返回反应组件
sidemenuNav.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};