react本机更改侦听端口

IT技术 reactjs react-native
2021-04-03 06:31:52

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

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

在此处输入图片说明

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

  1. https://facebook.github.io/react-native/docs/troubleshooting.html

  2. 试图停止在端口号 8081 上运行的进程,但没有成功

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

您的回答将不胜感激。谢谢

6个回答

不确定这是否记录在案[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

非常感谢帕特里克,它的工作。我可以更改端口号
2021-05-27 06:31:52
@AdrianSicaru 你在哪里看到的?
2021-06-08 06:31:52
OMG,谢谢!在过去的 2 个小时里一直在努力解决这个问题。为什么这没有记录在任何地方?!?!
2021-06-11 06:31:52
现在已记录在案。无论如何:facebook.github.io/react-native/docs/...(在“在非标准端口上运行打包程序”下)。
2021-06-14 06:31:52
这不是正确答案。Windows 上的端口是硬编码的。
2021-06-20 06:31:52

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

转到 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. 如果您使用自定义地铁配置

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
   }
   ...
}
@YugandharPathi,这个问题仍然在 ios 上运行,你可以在这里跟踪这个问题对于 android,我更新了genymotion 中设备设置调试服务器主机和端口,它工作正常。试试ios吧。
2021-05-22 06:31:52
我将所有 8081 都更改为 8088。但对我不起作用。仍然得到同样的错误。
2021-05-24 06:31:52
这适用于 react-native start 但对于 react-native run-ios 仍然指向 8081. 知道如何解决这个问题吗?
2021-06-03 06:31:52
如果您愿意,这里有一个永久的解决方案。github.com/nikhil-thakkar/react-native-patch
2021-06-11 06:31:52
更改文件node_modules很难被称为永久性的。任何时候你更新你的依赖项,你都会破坏那个变化。
2021-06-18 06:31:52

最简单的解决方案是:

下面的命令将构建将侦听端口1234 的Android 或 iOS 包

对于 iOSreact-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及以上。

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

  1. 使用命令创建项目:'react-native init [PROJECT_NAME]'

  2. 在 Xcode 中打开项目并将所有出现的“8081”替换为“8088”并保存更改

  3. 打开终端并将工作目录更改为上面创建的项目目录。使用以下命令更改 react native 使用的端口: react-native start --port 8088

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

在此处输入图片说明

如您所见,这将启动 Metro 实例。不要终止命令或终端窗口。让这个过程运行。

  1. 打开一个新的终端窗口,将工作目录更改为项目目录并使用以下命令运行 react-native 项目:

react-native run-ios

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

在此处输入图片说明加载包完成后,应用程序在模拟器上成功启动

希望这可以帮助。快乐编码

@nikhil.thakkar 不起作用。安装时出现错误信息。
2021-06-05 06:31:52
@ZhouHao 请检查 github 问题。我补充了一些问题。
2021-06-10 06:31:52
如果您愿意,这里有一个永久的解决方案。github.com/nikhil-thakkar/react-native-patch
2021-06-17 06:31:52

使用指定的端口运行 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

在模拟器或设备上启动应用程序后,在开发设置中更改服务器和端口号。

  • 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 然后按确定
2021-05-26 06:31:52