React Native环境搭建后出现transformFile未定义报错及500错误求助

依赖与版本适配排查 #

• 确认 Node 版本与当前使用的 React Native 版本适配：React Native 0.68 及以上要求 Node 版本 ≥14，0.72 及以上要求 Node 版本 ≥16，版本过高或过低都会触发 metro 打包异常。可执行 node -v 查看当前版本，切换到适配版本后重试。
• 清理依赖缓存重装：不同包管理工具的 lock 文件冲突、依赖安装不全是高频诱因，直接执行以下命令清理后重新安装依赖：

rm -rf node_modules
rm package-lock.json yarn.lock pnpm-lock.yaml
npm install

transformFile 报错专项修复 #

该报错基本由 metro 配置异常、babel 依赖版本不匹配导致，按以下步骤操作：

1. 检查项目根目录下的 babel.config.js 语法是否正确，默认配置必须包含 module:metro-react-native-babel-preset 预设，缺失的话补充完整后重启服务。
2. 执行命令重置 metro 缓存并启动服务：
   npx react-native start --reset-cache
3. 若仍报错，手动安装匹配版本的 metro 相关依赖：
   npm install metro@latest metro-react-native-babel-preset@latest --save-dev

安卓端 500 报错专项修复 #

• 确认开发设备和电脑处于同一局域网，且电脑防火墙未拦截 8081 端口。可以直接在安卓设备浏览器访问 http://你的电脑IP:8081，能正常访问说明网络连通正常，否则关闭电脑防火墙或者将 8081 端口加入白名单。
• 安卓 11 及以上版本默认禁止访问明文 HTTP 服务，需要在 android/app/src/main/AndroidManifest.xml 的 application 标签中添加明文访问权限：

<application
  ...
  android:usesCleartextTraffic="true"
  ...>

最终验证操作 #

所有修改完成后关闭所有运行中的终端窗口，重新打开终端依次执行：

1. npx react-native start --reset-cache
2. 新开终端窗口执行 npx react-native run-android

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