如何正确使用 RCT_METRO_PORT 更改 Metro 捆绑端口？

Posted 2023-04-15

【中文标题】如何正确使用 RCT_METRO_PORT 更改 Metro 捆绑端口？

【英文标题】：How to use RCT_METRO_PORT correctly to change metro bundle port?

【发布时间】：2022-01-07 07:22:29

【问题描述】：

我想在两个不同版本的 ios 上运行测试，因此我需要 Metro bundler 在两个不同的端口上运行。 但它大约是同一个仓库，所以我不能改变所有出现的 8081。 此外，我无法在 iOS 模拟器中使用 devtools 手动更改端口，因为它是用于使用 Detox、自动进行 e2e 测试。

我在这里和那里看到使用 RCT_METRO_PORT 可以工作，但直到现在我都没有成功......

所以这是一个简单的问题：我们如何使用 RCT_METRO_PORT 以便 Metro 捆绑器在 8081 以外的另一个端口上运行，使用 .env 文件或 package.json 脚本中的 env 变量？

[编辑]：我的问题不仅针对react native run ios，还针对构建版本，例如这个脚本set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name="iPhone 12 Pro" -derivedDataPath ios/build > /dev/null

【参考方案1】：

基于this answer你必须从环境变量中更改默认端口，有三种方式

首先：（本地环境）：安装react-native-dotenv，并在您的 babel 配置文件中进行配置。然后在你的项目的根文件夹中添加一个.env文件并写上RCT_METRO_PORT=8590。 （8590 是备用端口号的示例）

第二：（全局环境）：转到您的 bash/zsh rc 文件和 export 编号为 8590 的环境变量，例如：

export RCT_METRO_PORT=8590

提示：如果您的操作系统是 windows，第二个选项请关注this answer

第三：（内联环境）：对于每个操作，您应该使用--port 8590：

地铁：yarn start --port 8590 安卓：yarn android --port 8590 iOS：yarn ios --port 8590

测试：在您的终端中运行 echo $RCT_METRO_PORT 以测试第一种和第二种方法，以确保您的环境变量已设置。

iOS 提示：对于您项目的 ios 文件夹，找到 Pods 文件夹并在 Pods 文件夹中寻找 RCTDefines.h 文件，有两个他们，在他们俩里面把8081改成8590。

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

【参考方案2】：

这是您可以在package.json 中管理 dev 和 stage env 的不同端口的方法

DOCS

"scripts": 
  "android:dev": "RCT_METRO_PORT=8081 react-native run-android",
  "android:stage": "RCT_METRO_PORT=9091 react-native run-android",
  "ios:dev": "RCT_METRO_PORT=8081 react-native run-ios",
  "ios:stage": "RCT_METRO_PORT=9091 react-native run-ios",
  "start:dev": "react-native start --port 8081",
  "start:stage": "react-native start --port 9091",
  "build:dev": "export RCT_METRO_PORT=8081 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",
  "build:stage": "export RCT_METRO_PORT=9091 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",

或

"scripts": 
  "android:dev": "react-native run-android --port 8081",
  "android:stage": "react-native run-android --port  9091",
  "ios:dev": "react-native run-ios --port 8081",
  "ios:stage": "react-native run-ios --port  9091",
  "start:dev": "react-native start --port 8081",
  "start:stage": "react-native start --port 9091",
  "build:dev": "export RCT_METRO_PORT=8081 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",
  "build:stage": "export RCT_METRO_PORT=9091 && set -o pipefail && xcodebuild -workspace ios/myapp.xcworkspace -configuration Debug -scheme myapp -destination name=\"iPhone 12 Pro\" -derivedDataPath ios/build > /dev/null",

【讨论】：

我编辑我的帖子说我不只是在寻找开发模式，但不止于此！

@arnaudambro 我编辑了我的答案，你可以使用yarn build:dev 或yarn build:stage