React Native Android端Hot Reload仅JSX生效其他JS修改无效问题咨询

我之前在跨平台测试React Native项目时也碰到过几乎一模一样的问题，结合你提到的Windows 10 + Ubuntu 16.04环境、Android模拟器/EXPO物理设备的场景，给你整理几个亲测有效的排查和修复步骤：

1. 彻底清理React Native缓存 #

RN的缓存经常会“卡住”修改内容，先执行命令重置所有缓存：

npx react-native start --reset-cache

之后重新打包运行Android应用：

npx react-native run-android

Windows环境下如果命令执行有问题，也可以手动删除项目根目录下的node_modules/.cache文件夹，再重启Metro服务。

2. 检查并修复Watchman配置（重点针对Ubuntu） #

虽然你已经安装了Watchman，但Ubuntu系统的默认监听限制可能不够，导致它无法正确追踪JS文件的变化：

• 编辑/etc/sysctl.conf文件，添加或修改以下两行：

  fs.inotify.max_user_watches=524288
  fs.inotify.max_user_instances=512
  

• 执行sysctl -p让配置立即生效
• 重启Watchman服务：

  watchman shutdown-server
  watchman watch-del-all
  

完成后重新启动Metro Bundler，再测试修改是否生效。

3. 验证Babel转译配置 #

有时候Babel的缓存或配置错误会导致JS代码修改不被转译：

• 删除Babel缓存目录：

  rm -rf node_modules/.cache/babel-loader
  

  Windows用户直接手动删除node_modules\.cache\babel-loader即可
• 检查项目根目录的babel.config.js（或.babelrc），确保配置包含了必要的转译规则，比如正确引入@babel/preset-react和@babel/preset-env，没有意外排除普通JS文件。

4. 检查Metro Bundler的监听规则 #

确认metro.config.js没有错误排除JS文件：

• 打开项目根目录的metro.config.js，确保没有自定义的resolver规则把.js文件排除在外，默认配置应该自动监听所有.js、.jsx文件。如果有自定义配置，参考下面的基础模板调整：

  module.exports = {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
  };
  

5. 调整VS Code的保存设置 #

有时候VS Code的延迟保存会导致Metro无法及时检测到文件变化：

• 打开VS Code设置，开启files.autoSave: afterDelay，把延迟时间设为100ms左右，确保修改后立即触发文件保存。
• 同时确认文件编码为UTF-8，特殊编码可能导致Metro无法识别修改内容。

6. 重置设备连接 #

• 对于EXPO物理设备：断开USB连接/重新扫码配对，确保设备和电脑在同一局域网，Metro Bundler的地址能被设备正常访问。
• 对于Android Studio模拟器：执行adb reverse tcp:8081 tcp:8081重置端口转发，或者直接重启模拟器后重新运行项目。

如果以上步骤都试过还是不行，可以尝试创建一个全新的React Native空白项目，测试Hot Reload是否正常工作——如果新项目正常，那大概率是你现有项目的某个配置文件出了问题，可以逐步对比排查。

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