如何更改 React Native 和 Metro Bundler 端口

Question

我正在尝试在端口8088启动 React Native 调试器和捆绑器，因为8081被另一个程序使用，使用以下命令：

react-native run-android --port=8088

模拟器反向设置正确

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

但是metro bundler是从8081端口开始的

一旦某个程序正在读取我的 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，}

2. 在整个 ios 项目中搜索 8081 并将值替换为8088 。 我必须在以下文件中为变量RCT_METRO_PORT执行此RCT_METRO_PORT 。

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

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

npx react-native run-ios --port 8088

谢谢！

Answer 3

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

export RCT_METRO_PORT=8590

另外，在您的ios/Pods文件夹中找到RCTDefines.h文件，其中有两个文件，并且在其中将值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 。