添加Flavors后React Native应用无法连接Metro Bundler求助

问题背景 #

为React Native应用添加Flavors后，USB连接的物理设备无法连接Metro Bundler，应用安装后提示“Unable to load script”，重载后显示“Could not connect to development server”。已尝试adb反向代理、清除缓存、验证Metro可访问等操作，均无效。

Gradle关键配置：

debuggableVariants = ["localDebug"]

flavorDimensions "default"
productFlavors {
    local {
        resValue "string", "app_name", "Note Ninja (Debug)"
        applicationIdSuffix ".debug"
        versionNameSuffix "-debug"
        buildConfigField "String", "FLAVOR_NAME", "\"local\""
    }
    // 其他flavor配置略
}

npm脚本：

"android:local": "react-native run-android --mode=localDebug --appId com.noteninja.debug"

解决方案 #

1. 确保Debug变体的可调试属性正确配置 #

debuggableVariants配置需确保localDebug变体被正确标记为可调试，建议将配置放在android根块下，同时确认buildType的debug配置未被覆盖：

android {
    // 其他配置
    debuggableVariants = ["localDebug"]
    
    buildTypes {
        debug {
            debuggable true
            minifyEnabled false
            // 保留React Native debug所需的其他默认配置
        }
        // release配置略
    }

    flavorDimensions "default"
    productFlavors {
        // 你的flavor配置
    }
}

2. 配置React Native的Debug构建参数 #

在android/app/build.gradle中添加React Native构建配置，确保debug变体不预打包bundle，保留开发模式：

project.ext.react = [
    enableHermes: false, // 根据项目需求调整
    bundleInDebug: false, // 关键：debug模式下依赖Metro加载脚本，不打包本地bundle
    devDisabledInDebug: false, // 确保debug模式启用开发服务器连接
]

3. 调整npm运行脚本参数 #

去掉冗余的--appId参数（Gradle已通过applicationIdSuffix自动处理），使用--variant参数明确指定构建变体（适配不同AGP版本）：

"android:local": "react-native run-android --variant localDebug"

若使用AGP 7.0+，--mode=localDebug也可，但需确保mode名称与变体完全匹配。

4. 重新授权设备USB调试 #

由于Flavor修改了applicationId（添加了.debug后缀），设备会将该版本视为新应用，需重新授权：

• 断开并重新连接USB
• 在手机的USB调试授权弹窗中，勾选“始终允许此计算机调试”并确认

5. 手动指定Metro服务器地址 #

通过开发者菜单设置服务器地址，绕过localhost解析问题：

1. 摇晃设备打开开发者菜单（或执行adb shell input keyevent 82）
2. 进入Dev Settings > Debug server host & port for device
3. 输入电脑局域网IP+端口（如192.168.1.100:8081）
4. 返回应用并点击重载

6. 彻底清除缓存并重新构建 #

执行以下命令清除所有缓存，避免旧配置干扰：

# 清除Gradle缓存
cd android && ./gradlew clean cleanBuildCache
# 清除Metro缓存
npx react-native start --reset-cache
# 重新构建并运行
npm run android:local

7. 验证网络权限配置 #

确保debug版本的AndroidManifest.xml包含必要的网络权限，允许明文流量访问Metro：

<uses-permission android:name="android.permission.INTERNET" />

<application
    ...
    android:usesCleartextTraffic="true"> <!-- Android 9+ 需添加，允许HTTP连接 -->
    <!-- 其他配置 -->
</application>

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