主页 / coding / 问题 / 79297184
Accepted
Krzysztof Chabowski
Asked: 2024-12-20 20:08:06 +0800 CST

添加风格后，如何连接到 metro bundler？

  • 772

我遇到了一个问题，在为应用程序添加风格后，我无法让 React Native 应用程序连接到 metro 捆绑器。我搜索了很多可能的解决方案，但无法使其工作。当我使用通过 USB 连接的物理设备时会发生此问题。在添加风格之前，USB 调试已打开，一切正常。我需要使用物理设备来测试一些蓝牙功能。

这是我添加到我的 gradle 文件中的内容：

debuggableVariants = ["localDebug"]

flavorDimensions "default"
    productFlavors {
        local {
            resValue "string", "app_name", "Note Ninja (Debug)"
            applicationIdSuffix ".debug"
            versionNameSuffix "-debug"
            buildConfigField "String", "FLAVOR_NAME", "\"local\""
        }
        internal {
            resValue "string", "app_name", "Note Ninja (Internal Testing)"
            versionNameSuffix "-internal"
            buildConfigField "String", "FLAVOR_NAME", "\"internal\""
        }
        prod {
            resValue "string", "app_name", "Note Ninja"
            buildConfigField "String", "FLAVOR_NAME", "\"prod\""
        }
    }

现在我将我的 npm 脚本调整如下： "android:local": "react-native run-android --mode=localDebug --appId com.noteninja.debug",

当我运行此脚本时，metro 正在启动，并且应用程序已安装在手机上，但我收到错误消息“无法加载脚本。请确保您正在运行 Metro，或者该软件包‘index.android.bundle’已正确打包以供发布。当我单击重新加载时，我收到错误消息“无法连接到开发服务器”。

我尝试在手机浏览器中打开 localhost:8081，我可以访问 metro，所以这似乎不是防火墙问题。我尝试了 adb reverse tcp:8081 tcp:8081，但这也没有帮助（当我使用 adb devices 时，设备已连接，因为它已列出）。我卸载了应用程序，清除了 gradle 和 metro 缓存，但似乎没有任何帮助。

react-native

1 个回答

  1. Best Answer

    在使用 React Native 版本并将物理设备连接到 Metro 捆绑器时，这个问题很常见。让我分享一个可能的解决方案来帮助您解决它。既然您已经尝试adb reverse并清除了缓存，让我们关注一下可能被忽略的其他几个步骤。

    可能的原因及解决方法

    1. 软件包与风味不匹配
      可能index.android.bundle与您的风味没有正确关联。确保您没有意外为自定义风味创建生产风格的构建。检查您的gradle.properties或构建命令以确保debuggableVariants包含正确的变体（localDebug）。

      • 将其添加到您的build.gradle：

        debuggable true
applicationVariants.all { variant ->
    if (variant.buildType.name == "debug" && variant.flavorName == "local") {
        variant.outputs.all {
            outputFileName = "index.android.bundle"
        }
    }
}

    2. 确保将风格正确传递给 Metro
      Metro 捆绑器可能不知道正在使用哪种风格。尝试在启动 Metro 时明确指定风格和模式。

      修改您的package.json添加：

      "start:local": "react-native start --reset-cache"

      然后，在安装应用程序之前运行 Metro：

      npm run start:local

    3. React Native Flavors 配置
      仔细检查您的settings.gradle和build.gradle文件。确保您的localDebugFlavor 已正确映射并解析为正确的构建变体。有时，不匹配的 Flavor 名称可能会导致问题。

    4. 设备连接
      再次运行以下命令，以确保连接正确：

      adb reverse tcp:8081 tcp:8081
adb shell input keyevent 82 # Ensures the device stays awake

      另外，请检查系统上的ipconfig或ifconfig并确认 Metro 是否在预期的 IP 地址上提供服务（默认为localhost:8081）。

    5. 为调试风格启用明文流量
      将其添加到您的AndroidManifest.xml风格中localDebug：

      <application android:usesCleartextTraffic="true" />

    6. 检查应用安装路径
      有时，风格会生成与 Metro 捆绑器预期不匹配的不同应用程序 ID。验证您的应用程序com.noteninja.debug是否已正确解析。

    7. 使用特定配置运行 Metro
      有时，Metro 捆绑程序需要明确的指令。像这样运行 Metro：

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

    8. 重建 Gradle
      如果以上方法均不起作用，请尝试完全重建：

      cd android
./gradlew clean
cd ..
npm run android:local

    额外的调试

    • 通过检查确保设备已正确连接adb devices。
    • 用于adb logcat检查日志以查找更具体的错误。
    • 在您的浏览器上打开localhost:8081/debugger-ui并确保 Metro 正在运行。

    通过执行这些步骤，您应该能够解决问题。如果问题仍然存在，请尝试共享完整日志以进行更深入的分析。

    • 0

相关问题