React Native 如何修改端口号

在使用 React Native 进行开发时，默认情况下，Metro Bundler 会使用 8081 端口来启动开发服务器。然而，在某些情况下，你可能需要修改这个端口号，例如当 8081 端口被其他应用程序占用时，或者你希望在同一台机器上同时运行多个 React Native 项目时。本文将介绍如何在 React Native 中修改端口号。

1. 修改 Metro Bundler 的端口号

Metro Bundler 是 React Native 的打包工具，它负责将 JavaScript 代码打包并传输到设备上。要修改 Metro Bundler 的端口号，你可以通过以下几种方式来实现。

1.1 通过命令行参数修改端口号

在启动 React Native 项目时，你可以通过命令行参数来指定 Metro Bundler 的端口号。例如，如果你想将端口号修改为 8082，可以使用以下命令：

npx react-native start --port 8082

这将启动 Metro Bundler，并将其绑定到 8082 端口。

1.2 通过配置文件修改端口号

除了通过命令行参数修改端口号外，你还可以通过修改 Metro 的配置文件来永久性地更改端口号。React Native 项目中的 metro.config.js 文件是 Metro Bundler 的配置文件，你可以在其中指定端口号。

首先，在项目根目录下找到或创建 metro.config.js 文件，然后添加以下内容：

module.exports = {
  server: {
    port: 8082, // 将端口号修改为 8082
  },
};

保存文件后，重新启动 Metro Bundler，它将使用你指定的端口号。

2. 修改 React Native 应用的连接端口号

除了修改 Metro Bundler 的端口号外，你还需要确保 React Native 应用能够连接到正确的端口号。默认情况下，React Native 应用会尝试连接到 8081 端口。如果你修改了 Metro Bundler 的端口号，你还需要在应用中相应地修改连接端口号。

2.1 修改 iOS 应用的连接端口号

对于 iOS 应用，你可以在 AppDelegate.m 文件中修改连接端口号。找到以下代码：

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

将其修改为：

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil withPort:8082];

这将使 iOS 应用连接到 8082 端口。

2.2 修改 Android 应用的连接端口号

对于 Android 应用，你可以在 MainApplication.java 文件中修改连接端口号。找到以下代码：

@Override
protected String getJSMainModuleName() {
  return "index";
}

在其下方添加以下代码：

@Override
protected String getJSBundleFile() {
  return "http://localhost:8082/index.bundle?platform=android&dev=true&minify=false";
}

这将使 Android 应用连接到 8082 端口。

3. 总结

通过以上步骤，你可以轻松地修改 React Native 项目的端口号。无论是通过命令行参数还是配置文件，你都可以灵活地调整 Metro Bundler 的端口号。同时，确保在应用中相应地修改连接端口号，以确保应用能够正确连接到开发服务器。

修改端口号是一个简单的操作，但在某些情况下非常有用，特别是在端口冲突或需要同时运行多个 React Native 项目时。希望本文能帮助你更好地管理 React Native 项目的开发环境。