在Expo React Native集成抽屉导航器时遇_measure不存在等错误

出现的错误 #

• ERROR ReferenceError: Property '_measure' doesn't exist, js engine: hermes
• ERROR Invariant Violation: "main" 未注册。可能原因如下：
  • Metro（本地开发服务器）在错误的文件夹中运行。检查Metro是否运行，停止后在当前项目重启。
  • 某个模块因错误加载失败，且未调用AppRegistry.registerComponent，js engine: hermes

问题分析 #

从提供的代码和配置来看，核心问题集中在导航结构错误和Babel配置异常：

1. app.tsx中未导入TabNavigator却直接使用，导致组件加载失败；同时NavigationContainer下同时渲染多个根导航器，违反React Navigation的结构规范（一个NavigationContainer只能包含一个根导航器）。
2. babel.config.js中重复添加了expo-router/babel插件，且react-native-reanimated/plugin未放在插件数组的最后一位（Reanimated插件需要处理其他插件的输出，必须放在最后）。

解决方案 #

1. 修复App组件的导航结构

修改app.tsx，移除未定义的TabNavigator，确保NavigationContainer下仅包含一个根导航器：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import DrawerNavigator from './screens/drawer';

export default function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

2. 修正Babel配置

调整babel.config.js，移除重复插件并将react-native-reanimated/plugin移至最后：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      "expo-router/babel",
      ["module:react-native-dotenv", {
        "envName": "APP_ENV",
        "moduleName": "@env",
        "path": ".env",
        "safe": false,
        "allowUndefined": true,
        "verbose": false
      }],
      "react-native-reanimated/plugin" // 必须放在最后一位
    ],
  };
};

注：babel-preset-expo已经包含了module:metro-react-native-babel-preset的功能，无需重复添加。

3. 清理缓存并重启开发服务

执行以下命令清除Metro缓存并重启服务：

expo r -c

如果使用npm/yarn，可额外清理包缓存：

# npm
npm cache clean --force

# yarn
yarn cache clean

4. 验证依赖完整性

确保所有依赖已正确安装：

npm install
# 或
yarn install

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