如何更改React Native和Metro Bundler端口

Question

我试图在8088端口启动react-native调试器和捆绑器，因为8081被另一个程序使用了以下命令

react-native run-android --port=8088

模拟器反向设置正确

Running C:\Users\MyUser\AppData\Local\Android\Sdk/platform-tools/adb -s emulator-5554 reverse tcp:8088 tcp:8088

但是Metro bundler正在端口8081中启动

metro bundler console

一旦某些程序读取了我的8081端口并且我无法停止它，那将是启动它的最佳方法。

Answer 1

关于端口8081，需要修改两个文件：

1.react-native / local-cli / server / server.js-默认

2.react-native / React / React.xcodeproj / project.pbxproj-用上面两个文件中的所需端口替换所有8081端口

您的端口将更改。

Answer 2

我试图让我的RN应用在端口 8088 上运行，而不是在默认端口 8081 上运行。我花了将近2天的时间弄清楚该怎么做，但是找到的解决方案在我的情况下不起作用。终于我找到了解决这个问题的方法。请按照3个步骤操作，并解决此问题。

1. 在metro.config.js文件中，在module.exports内添加以下代码段。

服务器：{ 端口：8088，}

1. 在整个ios项目中搜索8081，然后将值替换为8088。我必须在以下文件中为变量RCT_METRO_PORT执行此操作。

• ios / Pods / Headers / Private / React-Core / React / RCTDefines.h
• ios / Pods / Headers / Public / React-Core / React / RCTDefines.h

1. 像往常一样运行构建，这次将端口作为参数传递。

npx react-native run-ios --port 8088

谢谢！

Answer 3

将React Native CLI配置迁移到@react-native-community/cli后，更改Metro bundler的默认端口变得非常容易，要更改默认PORT，只需在项目路径中通过以下命令导出环境变量即可：

export RCT_METRO_PORT=8590

此外，在RCTDefines.h文件夹中找到ios/Pods个文件，其中有两个，并且在两个文件中都将值8081更改为8590。

要进行测试，请运行echo $RCT_METRO_PORT，如果看到新的PORT 8590，请立即进行更改，并使用默认命令轻松运行项目。

注意 ：要使用React Native Debugger进行开发，只需按⌘ + t ，然后更改端口值8081到8590。

Answer 4

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