React 本机更改监听端口答案

【问题标题】：React native change listening portReact 本机更改监听端口
【发布时间】：2016-03-29 14:46:13
【问题描述】：

我正在使用 react native android 并且在 android 设备上部署应用程序时遇到问题。当我跑步时

react-native 启动，它不会在端口8081 上启动开发服务器

我尝试了以下提到的几个选项：

https://facebook.github.io/react-native/docs/troubleshooting.html
试图停止在端口号 8081 上运行的进程，但没有成功

我的问题是，我们可以将 React Native 开发服务器端口从 8081（这是 android 中的默认值，但我们可以在 ios 中从 AppDelegate.m 文件中更改）更改为其他端口或任何其他方法

我们将非常感谢您的回复。谢谢

【问题讨论】：

亲爱的 Vikram，你的问题是如此重要和趋势，因为更新了 React Native，每个解决方案都可以改变，对于当前版本，标记的帖子还没有工作，所以我添加一个新的解决方案 @ 987654323@。请检查一下，如果它是正确的答案，你想标记它以指导新访客。

标签： reactjs react-native

【解决方案1】：

不确定这是否记录在案[1]，您可以通过 CLI 参数指定端口，如下所示：

react-native start --port 9988

我在源代码中找到了它，它在我的本地机器上运行:)

https://github.com/facebook/react-native/blob/master/local-cli/server/server.js#L30

[1] 现在记录在这里：https://facebook.github.io/react-native/docs/troubleshooting#using-a-port-other-than-8081

【讨论】：

非常感谢帕特里克，它的工作。我可以更改端口号
天啊，谢谢！在过去的 2 个小时里一直在为此苦苦挣扎。为什么这在任何地方都没有记录？！？！
这不是正确的答案。 Windows 上的端口是硬编码的。
@AdrianSicaru 你在哪里看到的？
现在记录在案。无论如何：facebook.github.io/react-native/docs/…（在“在非标准端口上运行打包程序”下）。

【解决方案2】：

我知道已经晚了，但仅供参考，还有另一种方法可以永久更改端口。

转到 your_app\node_modules\react-native\local-cli\server\server.js 并将端口 8081 更改为 8088

会是这样的

    ...
      module.exports = {
      name: 'start',
      func: server,
      description: 'starts the webserver',
      options: [{
        command: '--port [number]',
        default: 8088,
        parse: (val) => Number(val),
      }
     ...

更新在 RN 0.57 上测试：
1. 如果您使用的是自定义 Metro 配置

const config = {
  ...
  server: {
    port: 8088,
  }
  ...
};

2。如果你不是那么，
转到 your_app\node_modules\react-native\local-cli\util\Config.js

const Config = {
   ...
   server: {
      port: process.env.RCT_METRO_PORT || 8088 //changed from 8081
   }
   ...
}

【讨论】：

在node_modules 中更改文件几乎不能称为永久。任何时候你更新你的依赖，你都会吹掉那个改变。
这适用于 react-native start 但对于 react-native run-ios 仍然指向 8081。知道如何解决这个问题吗？
@YugandharPathi ，这个问题还在 ios 上运行，你可以跟踪这个问题here。对于 android，我在 genymotion 中更新了 用于设备设置的调试服务器主机和端口，它工作正常。试试 ios。
如果您愿意，这是一个永久的解决方案。 github.com/nikhil-thakkar/react-native-patch
我将所有 8081 更改为 8088。但对我不起作用。仍然出现同样的错误。

【解决方案3】：

最简单的解决方案是：

以下命令将构建 Android 或 iOS 包，它将监听端口 1234

对于 iOS： react-native run-ios --port=1234

对于安卓 react-native run-android --port=1234

如果您使用的是 metro-server，那么您可以在服务器对象下添加端口，例如：

server:{ port:1234 }

或

运行

react-native start --port=1234

在此处了解 Metro-server 的更多配置：https://facebook.github.io/metro/docs/en/configuration

但需要0.55及以上。

【讨论】：

【解决方案4】：

在花了一整天的时间并经历了许多解决方案之后，这些建议的组合帮助我解决了这个问题。请按照以下步骤操作：

使用以下命令创建项目： 'react-native init [PROJECT_NAME]'
在 Xcode 中打开项目并将所有出现的“8081”替换为“8088”并保存更改
打开终端并将工作目录更改为上面创建的项目目录。使用以下命令更改 react native 使用的端口： react-native start --port 8088

运行此命令后，您会在终端中看到以下输出：

如您所见，这将启动 Metro 实例。不要杀死命令或终端窗口。让这个进程运行。

打开一个新的终端窗口，将工作目录更改为项目目录并使用命令运行 react-native 项目：

react-native run-ios

在第二个终端成功构建项目后，您将在第一个终端窗口中看到一个进度条，指示应用程序包的加载，如下所示：

完成加载包后，应用程序在模拟器上成功启动

希望这会有所帮助。快乐编码

【讨论】：

如果您愿意，这是一个永久的解决方案。 github.com/nikhil-thakkar/react-native-patch
@nikhil.thakkar 不起作用。安装时收到错误消息。
@ZhouHao 请查看github issue。我添加了一些问题。

【解决方案5】：

使用指定端口运行 Metro-bundler 服务器，例如。 “8089”

react-native start --port 8089

构建监听以上端口的 iOS 和 Android 包

iOS：。 react-native run-ios --port 8089 --simulator \"iPhone 8\"

安卓： react-native run-android --port 8089

在模拟器或设备上启动应用后，在 Dev-settings 中更改服务器和端口号。

iOS： Command + D in Mac and Ctrl + D in windows
- 点击配置捆绑器选项
- 提供主机为localhost，端口为8089，然后应用更改
安卓： Command + M in Mac and Ctrl + M in windows
- 点击更改捆绑包位置
- 将其更改为localhost:8089 然后按确定

【讨论】：

在 android 上你可以使用这个 npx react-native start --port=6969 点击 Change Bundle Location 将其更改为 localhost:6969 然后按 ok

【解决方案6】：

设置RCT_METRO_PORT，例如：

export RCT_METRO_PORT=8765

【讨论】：

在windows上你可以使用set而不是export

【解决方案7】：

export RCT_METRO_PORT=8082
react-native start --port $RCT_METRO_PORT
react-native run-ios

https://facebook.github.io/react-native/docs/troubleshooting#using-a-port-other-than-8081

【讨论】：

【解决方案8】：

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  server: {
    port: 8088,
  },
}

【讨论】：

【解决方案9】：

您需要覆盖 RCT_METRO_PORT 宏变量以确保您的应用在通过 xcode 或 react-native run-ios 运行时指向正确的端口。这可以通过在工作区中打开 Pods 项目、导航到构建设置并添加预处理器宏来完成。例如RCT_METRO_PORT=7777，如果你使用的端口是7777。

【讨论】：

【解决方案10】：

实际上，在当前版本的 React Native 中，metro bundler 的配置在 @react-native-community/cli 中，为了更改 Metro bundler 的默认 PORT，我们应该通过以下命令将默认 PORT 更改为 export 一个环境变量在项目路径内：

export RCT_METRO_PORT=8590

然后在你的项目的ios文件夹中找到Pods文件夹，在Pods文件夹里面寻找RCTDefines.h文件，里面有两个，都把8081改成@987654329 @。

当然，对于测试，我们可以运行echo $RCT_METRO_PORT，如果您看到新的端口8590，它现在已更改，我们可以使用默认命令运行我们的项目，如yarn start 然后yarn ios 或@ 987654334@.

提示：要连接到 React Native 调试器，请按 ⌘+t 并将 8081 端口更改为 8590。

【讨论】：

【解决方案11】：

您可以使用此react-native-port-patcher，它将默认的 8081 端口替换为您想要的端口号。

【讨论】：

这看起来是个非常糟糕的主意。看看接受的答案
我在 Mac 上运行它。接受的答案不适用于我的情况。即使我运行“react-native start --port 9988”并尝试通过运行“react-native run-ios”来运行应用程序，它也会尝试从已被 McAfee 占用的默认端口 8081 运行。下面是结果。连接到 localhost 端口 8081 [tcp/sunproxyadmin] 成功！端口 8081 已在使用，打包程序未运行或未正确运行命令 /bin/sh 失败，退出代码为 2 ** BUILD FAILED **
只有在将所有使用它的文件中的 8081 端口替换为其他端口后，我才能运行该应用程序。因此，而不是手动进行。我使用的是“react-native-port-patcher”，它为我们工作。
这是个好主意，因为目前没有更好、更方便的方法来完成这项工作。

【解决方案12】：

按照以下步骤操作：

第 1 步：

vim node_modules/react-native/local-cli/server/server.js

第 2 步： 更改默认端口 - 任何其他端口 //example -> 8089

第 3 步： 回到 project -> 并执行 npm start

【讨论】：

这个答案只是为了向大家展示有人使用vim。

【解决方案13】：

如果使用 yarn- yarn start --port your port name 对我有用。例如。纱线开始 --port 8082

【讨论】：

【解决方案14】：

如果您想更改 8081 以外的端口并在模拟器中运行相同的端口，我认为此链接有更好的工作解决方案： https://medium.com/@hsuastegui/use-react-native-in-a-different-port-1109db5674d8

【讨论】：

【解决方案15】：

当你执行类似的命令时

./node_modules/react-native/scripts/launchPackager.command

要启动调试服务器，请附加参数

---端口 8082

它适用于我在 React native 0.53.3 中。

【讨论】：