如何修改 IP 和端口使用 react-native Android？

Posted 2023-03-13

【中文标题】如何修改 IP 和端口使用 react-native Android？

【英文标题】：How to modify IP & port use react-native Android?

【发布时间】：2015-12-20 12:41:24

【问题描述】：

我使用了 react-native android 演示项目 AwesomeProject 并在我执行的项目中：

react-native start

在第二个终端：

react-native run-android

启动网络服务器并安装 Android APK。默认webserver配置为localhost:8081，如何修改webserver端口，Android项目中如何更新IP&Port记录。

编辑：

我刚刚发现可以在Android调试设置中修改ip地址，似乎“getDebugServerHost”是一个私有API，Facebook有没有提供任何API来改变ip&port？

【问题讨论】：

请在other post查看我的回答。

【参考方案1】：

正如 OP 对 MossP 的 answer 评论的那样，现在可以使用 debug_http_host 共享偏好来实现这一点（请参阅 this 问题）。

所以，如果你想使用端口 8082，你可以在你的 MainActivity.java 文件中添加一个 onCreate 方法，它可能看起来像这样：

@Override
protected void onCreate(Bundle state)
    super.onCreate(state);

    SharedPreferences preferences =
        PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
    preferences.edit().putString("debug_http_host", "localhost:8082").apply();

当然不要忘记导入android.content.SharedPreferences、android.os.Bundle和android.preference.PreferenceManager。

这将使您的应用尝试在所需端口而不是 8081 访问打包程序。

然后，您只需确保使用--port 8082（如here 所述）启动打包程序，您就应该准备就绪。 （除非你碰巧在使用 Nuclide，这完全是另一个 story）。

请注意，在 React Native 0.46 之前，这只会允许一个人成功运行应用程序，但仍然无法实际附加 调试器非标准端口。从 React Native 0.46 开始，附加一个调试器 should also work。

【讨论】：

这不是专门问的，所以我不想在答案本身中引用它，但还要注意，你甚至可以在构建时使用 gradle 的 buildConfigField 使端口可配置，尽管这可以获得有点复杂。

我认为答案包含这样的旁注是可以接受的，即使他们没有回答特别提出的问题。但当然，答案应该回答具体要求的内容，并在此基础上添加很好

当您的目标 Android 设备没有功能正常的菜单按钮时，这很有用。

【参考方案2】：

更新：请参阅Tomty's answer，了解 2019 年当前推荐的执行方式。

不幸的是，该端口目前是 (2015/09/23) 硬编码的。我相信这会及时改变，因为它已经从项目的高级贡献者那里提出了一个问题。 https://github.com/facebook/react-native/issues/2704

【讨论】：

谢谢。我们现在只能通过修改 debug_http_host SharedPreferences 值来修改 url 而不能修改端口。

进一步更新：现在也可以使用 debug_http_host 更改端口。

@Tomty 请您提供更多关于如何或在何处使用 debug_http_host 的见解？

@bozzmob 添加了一个单独的答案，详细说明了这一点。如果还有什么不清楚的地方，请告诉我。

【参考方案3】：

对此有一个小的解决方法。在物理设备上运行此程序的任何人（甚至）都可以使用不同的端口重新启动他们的 adb 会话。

例如。

react-native start --port=1234

在不同的 cmd/终端窗口上。

react-native run-android

之后我收到了这些消息。

BUILD SUCCESSFUL

Total time: 22.589 secs
Running C:\SDK/platform-tools/adb -s VY0025160560725694 reverse tcp:8081 
tcp:8081

这会在默认反向端口 8081 上运行，该端口已被 McAfee 阻止。

解决方法：

adb reverse tcp:8081 tcp:1234

试试看。它对我有用。

注意：您可能需要终止并重新打开应用程序。

目前我无法为模拟设备提供答案，因为我的系统上没有安装模拟设备。但是语义应该是相似的。

注意：这可能会破坏使用 watchman 的自动代码更新。

【参考方案4】：

如https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu中所述，

您可以通过摇晃设备或通过以下方式访问开发者菜单 在 ios 的硬件菜单中选择“摇动手势” 模拟器。当您的应用程序运行时，您还可以使用 ⌘D 键盘快捷键 在 iOS 模拟器中运行，或在 Android 中运行时 ⌘M 模拟器。或者，对于 Android，您可以运行命令 adb shell 输入 keyevent 82 打开开发菜单（82 为菜单键码）。

所以在 iOS 设备上摇动它，在 iOS 模拟器上按 control D，在 Android 模拟器上按 control M，在 Android 设备上做adb shell input keyevent 82

然后在打开的菜单中，转到Dev Settings，调试设备的服务器和主机端口，然后编辑IP和端口。

ps：仅适用于非生产环境

【讨论】：

菜单中没有这样的菜单项。我怎样才能找到它？

【参考方案5】：

在 Mac 上：

去无线网络 打开网络首选项 Wi-Fi 已连接到 wifi name 并具有 IP 地址 xxx.xxx.x.x。 获取您的 IP 地址。 转到设备上的应用程序 进入开发设置 点击调试设备的服务器主机和端口 填写你的IP地址和端口是8081（例如ipaddress:8081）。

【参考方案6】：

这是 Tomty 答案的延伸。查看示例项目here：

npm i @nick-bull/react-native-debug-address

# DEBUG_HOST=127.0.0.1:8081 npx react-native start --port 8081
# or, equivalently
DEBUG_PORT=8081 npx react-native start --port 8081

npx react-native run-android --port 8081