React Native 出现 AppRegistry 未注册及 ReferenceError 报错如何解决？

Invariant Violation: Module AppRegistry is not a registered callable module 是典型的次生错误。真正导致崩溃的是日志中的第一条异常：

ReferenceError: Can't find variable: i

JavaScript 线程在执行 bundle 初始化时遭遇未捕获的异常，导致脚本中断，AppRegistry.registerComponent 尚未被执行。Native 侧随后调用 runApplication 时自然找不到已注册的模块。循环依赖警告同样可能导致模块在初始化时导出为 undefined，进而引发引用错误。

1. 对齐 Babel 预设版本（高概率原因） #

package.json 中存在明显的工具链版本不匹配：

• react-native 使用的是 ^0.64.1
• metro-react-native-babel-preset 使用的却是 ^0.59.0

过旧的 Babel 预设在编译 RN 0.64 代码时，可能因为语法转换规则不一致而产生变量丢失或作用域混乱（例如压缩后变量 i 找不到定义）。请将 devDependencies 中的版本对齐：

"devDependencies": {
  "@babel/core": "^7.12.9",
  "@babel/runtime": "^7.12.5",
  "metro-react-native-babel-preset": "^0.64.0",
  "react-test-renderer": "16.13.1"
}

修改后执行彻底重装与清理：

rm -rf node_modules package-lock.json
npm install
cd android
./gradlew clean
cd ..
npm start -- --reset-cache

2. 调整 index.js 中的定义顺序 #

Root 组件的 render 方法中引用了 Apps，但 Apps 却在文件末尾才通过 const 声明。虽然组件渲染通常发生在模块求值之后，但这种写法极易在初始化阶段引发暂时性死区问题。应将 Apps 的定义移到 Root 之前：

const Apps = createAppContainer(AppNavigator);

class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <Apps />
      </Provider>
    );
  }
}

AppRegistry.registerComponent(appName, () => Root);

3. 解除循环依赖 #

控制台明确警告了以下引用环：

src/component/FeedList.js -> src/component/FeedCell.js -> src/component/TagDetail.js -> src/component/FeedList.js

当存在循环依赖时，模块在加载过程中可能拿到尚未初始化的 undefined 导出。如果这些模块在顶层作用域直接使用了相关导入，就会抛出 ReferenceError。建议：

• 将循环链条中共用的基础组件或工具函数提取到独立的第三方文件中；
• 或者避免在模块顶层立即引用循环依赖中的导出，将引用延迟到方法内部执行。

4. 进一步定位非法变量 i #

如果更新工具链后问题依旧，说明代码中确实残留了未定义的变量 i。由于是在添加并删除 TypeScript 文件后出现的，请检查：

• 全局搜索是否存在手误的独立变量 i（例如循环变量作用域错误，或本应写为 item、index 的地方被误删）。
• 删除 TS 文件时是否留下了损坏的导入路径或不完整的代码片段。
• 运行 adb logcat 或通过 Android Studio 的 Logcat 查看完整 JS 堆栈，红色错误日志中通常会直接打印出 ReferenceError 所在的具体源文件和行号。

优先升级并对齐 metro-react-native-babel-preset 版本，清理所有缓存；同时修正 index.js 中的变量声明顺序，并重构消除 FeedList 相关组件的循环依赖。这些措施能够排除 JS 早期初始化崩溃，使 AppRegistry 正常注册。

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