React Native嵌套抽屉导航问题：navigation.getParent().openDrawer()失效

问题分析 #

你的导航层级实际与描述的嵌套顺序相反：最外层是左侧抽屉（AddDrawerNavigator，ID为Post），内部嵌套右侧抽屉（MsgDrawerNavigator，ID为DirectMessages）。你之前调用navigation.getParent("DirectMessages").openDrawer()时，实际触发的是右侧抽屉的打开操作，因层级逻辑错误导致显示空白。而你真正需要操作的是最外层的左侧抽屉（ID为Post）。

解决方案 #

方案1：通过导航器ID获取目标抽屉实例 #

修改FeedScreen.js中的navigateToMessages函数，直接获取最外层左侧抽屉的导航实例并调用打开方法：

const FeedScreen = ({navigation}) => {
  const navigateToMessages = () => {
    // 获取左侧抽屉导航器（ID为"Post"）
    const leftDrawerNavigator = navigation.getParent("Post");
    if (leftDrawerNavigator) {
      leftDrawerNavigator.openDrawer();
    }
  };

  return (
    <View style={styles.container}>
          <TouchableOpacity onPress={navigateToMessages}>
            {/* 你的组件内容 */}
          </TouchableOpacity>
    </View>
  );
};

方案2：使用DrawerActions指定抽屉ID #

如果偏好使用导航action的方式，可导入DrawerActions并明确指定目标抽屉ID：

import { DrawerActions } from '@react-navigation/native';

const FeedScreen = ({navigation}) => {
  const navigateToMessages = () => {
    navigation.dispatch(DrawerActions.openDrawer({ drawerId: "Post" }));
  };

  return (
    <View style={styles.container}>
          <TouchableOpacity onPress={navigateToMessages}>
            {/* 你的组件内容 */}
          </TouchableOpacity>
    </View>
  );
};

关键说明 #

• 确保导航器ID与代码配置一致：左侧抽屉的AddDrawer.NavigatorID为Post，右侧抽屉的MsgDrawer.NavigatorID为DirectMessages。
• navigation.getParent()会向上遍历导航树匹配目标ID，需保证目标ID对应你要操作的抽屉导航器。

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