使用createDrawerNavigator时出现undefined is not a function错误求助

问题定位与修复方案 #

1. 版本兼容性问题 #

react-navigation-drawer必须和react-navigation主包版本严格匹配，版本不兼容会直接导致createDrawerNavigator导出为undefined。

修复操作：

• 先卸载现有抽屉导航包：

yarn remove react-navigation-drawer

• 安装与react-navigation v4.x 匹配的指定版本：

yarn add react-navigation-drawer@^2.4.3

2. React Native Reanimated 配置不完整 #

抽屉导航依赖react-native-reanimated，配置错误会间接导致导航函数无法正常加载。

检查并修正babel配置：
打开babel.config.js，确保react-native-reanimated插件排在首位：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

3. 清除缓存重启项目 #

缓存残留可能导致模块无法正确加载，执行以下操作：

• 清除Metro缓存：

npx react-native start --reset-cache

• 重启Expo项目：

expo start -c

4. 代码结构验证 #

你的代码层级是正确的，但额外确认：

• navigation.openDrawer()仅在抽屉导航的子页面中调用（当前HomeScreen属于抽屉子页面，符合要求）

最终验证 #

完成上述步骤后重新运行项目，createDrawerNavigator的调用错误应该会消失。若问题仍存在，可尝试删除node_modules和yarn.lock文件，重新执行yarn install后再启动项目。

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