如何更改 React Native 和 Metro Bundler 端口答案

【问题标题】：How change React Native and Metro Bundler port如何更改 React Native 和 Metro Bundler 端口
【发布时间】：2019-01-30 00:49:34
【问题描述】：

我正在尝试在端口 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 捆绑器从 8081 端口开始

如果某个程序正在读取我的 8081 端口并且我无法停止它，那么启动它的最佳方式是什么。

【问题讨论】：

标签： android react-native bundler

【解决方案1】：

8081端口有两个文件需要修改：

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

2.react-native/React/React.xcodeproj/project.pbxproj - 将以上两个文件中的所有 8081 端口替换为您想要的端口

您的端口将被更改。

【讨论】：

【解决方案2】：

我试图让我的 RN 应用在端口 8088 而不是默认端口 8081 上运行。我花了将近 2 天的时间来弄清楚如何做到这一点，但找到的解决方案在我的情况下不起作用。最后我找到了解决这个问题的方法。按照 3 个步骤解决此问题。

在metro.config.js 文件中，在module.exports 中添加以下sn-p。

服务器：{ 端口：8088，}

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

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

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

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

npx react-native run-ios --port 8088

谢谢！

【讨论】：

【解决方案3】：

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

export RCT_METRO_PORT=8590

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

对于测试运行echo $RCT_METRO_PORT，如果您看到新的端口8590，它现在已更改，并且可以使用默认命令轻松运行您的项目。

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

【讨论】：

【解决方案4】：

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

【讨论】：