Drawer导航头部图标打开错误抽屉的问题求助

核心原因 #

你在子Drawer组件中通过外层useNavigation()获取的是父导航的上下文对象，调用toggleDrawer()时自然会触发父导航的抽屉，而非当前子Drawer的。

解决方案 #

将Drawer.Navigator的screenOptions改为函数形式，直接使用函数参数中提供的当前子Drawer导航实例，而非外层的导航对象。

修改后的代码示例 #

const SFrench = () => {
  // 重命名为parentNavigation，明确用于父导航的返回操作
  const parentNavigation = useNavigation()
  return (
    <Drawer.Navigator
      // 改为函数式screenOptions，接收当前子Drawer的navigation参数
      screenOptions={({ navigation }) => ({
        drawerStyle: {
          backgroundColor: Colors.primary,
        },
        drawerActiveTintColor: Colors.secondary,
        drawerInactiveTintColor: 'white',
        headerLeft: () => {
          return (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
              <CustomItem
                iconName={Platform === 'android' ? 'arrow-back' : "arrow-back-ios"}
                onPress={() => parentNavigation.pop()}
              />
            </HeaderButtons>
          );
        },
        headerRight: () => {
          return (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
              <CustomItem
                iconName="menu"
                // 使用当前子Drawer的navigation触发抽屉切换
                onPress={() => navigation.toggleDrawer()}
              />
            </HeaderButtons>
          );
        },
      })}>
      <Drawer.Screen key="1" name="page 1" component={SFPage1} />
      <Drawer.Screen key="2" name="page 2" component={SFPage2} />
      <Drawer.Screen key="3" name="page 3" component={SFPage3} />
      
    </Drawer.Navigator>
  );
};

关键说明 #

• 外层的parentNavigation专门处理返回父页面的逻辑（pop()），确保回到父导航层级
• 函数式screenOptions参数中的navigation是当前子Drawer导航的实例，调用它的toggleDrawer()会精准触发子导航的抽屉开关

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