React Navigation V6汉堡图标无法控制抽屉组件求助

1. 移除Screen Options中多余的属性 #

你的Drawer.Screen配置里，错误地将route和navigation作为options属性返回，这会干扰React Navigation的默认行为，包括汉堡按钮的点击事件绑定。

修改Router中所有Screen的options，以Screen1为例：

options={({route, navigation} : any) => ({
  headerRight: () => (<IconButton icon="cog" size={24} color={Theme.colors.text} onPress={() => navigation.navigate('Settings')} />)
})}

同样删除Screen2、Settings的options里的route: {route}, navigation: {navigation}两行。

2. 绑定汉堡按钮的抽屉切换事件（可选，若默认按钮仍失效） #

如果移除多余属性后默认汉堡按钮仍无响应，可手动在Screen的options中配置headerLeft，明确绑定抽屉切换动作：

options={({route, navigation} : any) => ({
  headerLeft: () => (
    <IconButton 
      icon="menu" 
      size={24} 
      color={Theme.colors.text} 
      onPress={() => navigation.toggleDrawer()}
    />
  ),
  headerRight: () => (<IconButton icon="cog" size={24} color={Theme.colors.text} onPress={() => navigation.navigate('Settings')} />)
})}

navigation.toggleDrawer()是React Navigation提供的直接切换抽屉状态的方法，也可使用navigation.dispatch(DrawerActions.toggleDrawer())，效果一致。

3. 修正Menu组件的路由名称大小写错误 #

Menu组件中导航项绑定的路由名称是小写的'screen1'/'screen2'，但Router中定义的路由名称是大写的'Screen1'/'Screen2'，这会导致菜单点击无法导航。修改Menu组件的state：

this.state = {
  menu: [
    {
      name: 'screen1.name',
      fallbackName: 'Screen 1',
      icon: 'dice-multiple-outline',
      iconFocused: 'dice-multiple',
      onPress: this.props.navigation.navigate.bind(this.props.navigation, 'Screen1')
    },
    { 
      name: 'screen2.name',
      fallbackName: 'Screen 2',
      icon: 'drama-masks',
      iconFocused: 'drama-masks',
      onPress: this.props.navigation.navigate.bind(this.props.navigation, 'Screen2')
    }
  ]
}

注意bind的上下文是this.props.navigation，确保navigate方法执行上下文正确。

验证效果 #

修改完成后重新运行项目：

• 汉堡图标点击可正常切换抽屉
• 滑动手势保持正常
• 菜单项点击可正确导航到对应页面

内容的提问来源于stack exchange，提问作者MartynFItz