如何让Metro Bundler实时更新两个独立AVD中的React Native应用

问题背景 #

我尝试同时运行两个不同的React Native应用并独立调试，两个应用分别存放于不同仓库文件夹，通过Android Studio创建了两个AVD，设备ID为andr1和andr2。

已执行操作 #

• 启动第一个AVD：

  emulator -port 9988 -avd andr1
  

• 运行第一个应用：

  react-native run-android --port=8081 --deviceId=emulator-9988
  

  构建完成后Metro Bundler已启动，但无法检测代码变更并实时更新应用。

• 启动第二个AVD：

  emulator -port 9999 -avd andr2
  

• 运行第二个应用：

  react-native run-android --port=8082 --deviceId=emulator-9999
  

  应用可正常启动，但同样无法通过Metro Bundler追踪代码变更，更新必须重新执行run-android命令。

核心问题 #

如何让Metro Bundler实时检测并更新两个独立AVD中RN应用的代码变更？

环境依赖 #

"react-native": "^0.71.6",
"react-native-gradle-plugin": "^0.71.19"

解决方案 #

1. 配置独立的Metro Bundler参数 #

每个项目根目录下的metro.config.js需明确指定端口和独立缓存路径，避免冲突：

第一个应用（端口8081）：

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  server: {
    port: 8081,
  },
  cacheStores: [
    {
      type: 'fs',
      root: `${__dirname}/.metro-cache-8081`,
    },
  ],
});

第二个应用（端口8082）：

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  server: {
    port: 8082,
  },
  cacheStores: [
    {
      type: 'fs',
      root: `${__dirname}/.metro-cache-8082`,
    },
  ],
});

2. 指定Android应用的调试端口 #

在每个应用的android/app/build.gradle中添加端口配置：

第一个应用：

project.ext.react = [
    enableHermes: false,
    bundleAssetName: "index.android.bundle",
    devServerPort: 8081 // 绑定对应Metro端口
]

第二个应用对应修改为：

project.ext.react = [
    enableHermes: false,
    bundleAssetName: "index.android.bundle",
    devServerPort: 8082 // 绑定对应Metro端口
]

3. 手动启动独立的Metro服务 #

不要依赖react-native run-android自动启动的Metro，手动分别启动两个服务：

• 进入第一个应用目录，新开终端执行：

  npx react-native start --port 8081 --reset-cache
  

• 进入第二个应用目录，新开终端执行：

  npx react-native start --port 8082 --reset-cache
  

4. 为AVD配置对应调试地址 #

在每个AVD中打开开发者菜单（按Ctrl+M或摇晃设备），选择「Change Bundle Location」，输入对应地址：

• 第一个AVD：http://localhost:8081/index.bundle?platform=android&dev=true&minify=false
• 第二个AVD：http://localhost:8082/index.bundle?platform=android&dev=true&minify=false

5. 故障排查（若仍不生效） #

• 清除应用缓存：npx react-native clean
• 重启对应AVD和Metro Bundler
• 检查防火墙是否拦截了指定端口

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