React Navigation：Tab嵌套Stack中全局HeaderLeft抽屉菜单图标异常问题

你遇到的核心问题是导航器层级设置错误——你的抽屉导航器MyDrawerNavigator并没有作为顶层导航器被使用，导致嵌套在底部标签导航器里的栈导航器无法获取到抽屉的导航方法，所以才会出现undefined is not a function的报错。

具体修复步骤： #

1. 调整导航器层级：把MyDrawerNavigator设为顶层导航器，包裹住你的AppNavigator（底部标签导航器），这样所有子导航器的navigation对象都能访问到抽屉的操作方法。
2. 确认导入DrawerActions：务必在文件顶部导入这个模块，避免找不到相关方法。
3. 简化菜单按钮的调用逻辑：层级调整后，直接使用props.navigation.openDrawer()就能正常工作，不需要复杂的dispatch（当然用dispatch也可行，但openDrawer()更简洁直观）。

修改后的完整代码示例： #

// 先确保导入所有必要的导航模块
import { createDrawerNavigator, createBottomTabNavigator, createStackNavigator, createAppContainer, DrawerActions } from 'react-navigation';

const MenuButton = (props) => { 
  return ( 
    <View> 
      <TouchableOpacity onPress={() => { 
        // 现在可以直接调用openDrawer方法
        props.navigation.openDrawer();
        // 也可以用dispatch写法：props.navigation.dispatch(DrawerActions.openDrawer())
      }}> 
        <Text>Menu</Text> 
      </TouchableOpacity> 
    </View> 
  );
};

// 把AppNavigator作为抽屉导航器的主页面
const MyDrawerNavigator = createDrawerNavigator( 
  { 
    MainApp: { screen: AppNavigator },
    Wishlist: { screen: wishlist }, 
  }, 
  { 
    contentComponent: SideMenuScreen, 
    drawerWidth: 200, 
  } 
);

const AppNavigator = createBottomTabNavigator({ 
  Home: { 
    screen: createStackNavigator({ 
      Home: { screen: Home }, 
      Contact: { screen: Contact } 
    }, { 
      defaultNavigationOptions: ({ navigation }) => ({ 
        headerStyle: { backgroundColor: 'white', borderWidth:0, borderBottomWidth:0 }, 
        headerTitle: headerTitleNavigationOptions('HOME'), 
        headerLeft: <MenuButton navigation={navigation}/>, 
        headerRight: headerRightNavigatorOptions(navigation) 
      }) 
    }), 
    navigationOptions: ({ navigation }) => ({ 
      headerStyle: { backgroundColor: 'white', borderWidth:0, borderBottomWidth:0 }, 
    }), 
  }}, { 
    tabBarOptions: { showLabel: false, style: { backgroundColor: 'white', borderTopWidth:1 } }, 
    initialRouteName: 'Home', 
    tabBarComponent: TabBarBottom, 
    tabBarPosition: 'bottom', 
    animationEnabled: false, 
    swipeEnabled: false 
  } 
);

// 顶层容器改为抽屉导航器
const App = createAppContainer(MyDrawerNavigator);

为什么之前的方法无效？ #

在React Navigation中，导航器的层级直接决定了navigation对象能访问的方法范围：

• 只有当抽屉导航器作为顶层时，所有嵌套在它内部的导航器（底部标签、栈）的navigation才会继承抽屉的操作方法（openDrawer、closeDrawer等）。
• 你之前单独定义了抽屉导航器但没有将其设为顶层，导致栈导航器的navigation完全不知道抽屉的存在，调用相关方法自然会报错。

另外你尝试的props.navigation.navigate(openDrawer())是错误用法——navigate方法需要传入路由名称，而不是直接调用方法，这种写法本身就不符合API规范。

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