react native如何修改端口

# React Native如何修改端口

## 前言

在React Native開發過程中，我們經常會遇到端口沖突的問題。默認情況下，React Native使用8081端口運行Metro打包器（bundler），但當這個端口被其他應用程序占用時，就會導致開發服務器無法啟動。本文將詳細介紹如何修改React Native應用的端口號，包括臨時修改和永久配置的方法，以及相關的注意事項和高級配置技巧。

## 目錄

1. [為什么需要修改端口](#為什么需要修改端口)
2. [查看當前端口占用](#查看當前端口占用)
3. [臨時修改端口](#臨時修改端口)
4. [永久修改端口配置](#永久修改端口配置)
5. [Android配置修改](#android配置修改)
6. [iOS配置修改](#ios配置修改)
7. [多項目開發時的端口管理](#多項目開發時的端口管理)
8. [常見問題與解決方案](#常見問題與解決方案)
9. [高級配置技巧](#高級配置技巧)
10. [總結](#總結)

## 為什么需要修改端口

在開發React Native應用時，可能會遇到以下幾種需要修改端口的情況：

1. **端口沖突**：8081端口被其他應用（如另一個React Native項目、其他服務）占用
2. **公司網絡限制**：某些公司網絡可能限制特定端口的使用
3. **多項目并行開發**：同時運行多個React Native項目需要不同端口
4. **安全考慮**：出于安全策略需要更改默認端口

## 查看當前端口占用

在修改端口前，最好先確認當前端口是否真的被占用：

### Windows系統
```cmd
netstat -ano | findstr 8081

macOS/Linux系統

lsof -i :8081

如果看到輸出結果，說明端口已被占用。你可以選擇終止占用進程或修改React Native的端口。

臨時修改端口

最簡單的修改端口方式是臨時通過命令行參數指定：

npx react-native start --port 8088

這會啟動Metro bundler并使用8088端口。要運行應用，你需要在另一個終端執行：

npx react-native run-android
# 或
npx react-native run-ios

注意：這種方式每次啟動服務都需要指定端口參數，適合臨時使用。

永久修改端口配置

要使端口修改永久生效，需要修改項目配置：

1. 修改package.json

在package.json的scripts部分修改start命令：

"scripts": {
  "start": "react-native start --port 8088",
  "android": "react-native run-android",
  "ios": "react-native run-ios"
}

2. 創建或修改metro.config.js

在項目根目錄創建或修改metro.config.js文件：

module.exports = {
  server: {
    port: 8088 // 你的自定義端口
  },
  // 其他配置...
};

Android配置修改

修改了Metro端口后，Android應用也需要相應配置才能連接到正確的端口：

1. 修改調試配置

在android/app/src/main/java/com/yourprojectname/MainApplication.java中：

@Override
public void onCreate() {
  super.onCreate();
  // 修改此處
  SharedPreferences preferences =
    PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
  preferences.edit().putString("debug_http_host", "localhost:8088").apply();
}

2. 修改Android清單文件

在android/app/src/main/AndroidManifest.xml中，確保有網絡權限：

<uses-permission android:name="android.permission.INTERNET" />

3. 清除緩存

修改后執行：

npx react-native run-android --reset-cache

iOS配置修改

對于iOS項目，需要修改以下配置：

1. 修改AppDelegate.m

在ios/YourProjectName/AppDelegate.m中：

NSURL *jsCodeLocation;

// 修改為你的自定義端口
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8088/index.bundle?platform=ios"];

2. 清除緩存

npx react-native run-ios --reset-cache

多項目開發時的端口管理

當同時開發多個React Native項目時，建議為每個項目分配唯一端口：

1. 創建.env文件：

   METRO_PORT=8088
   

2. 修改metro.config.js： “`javascript const { METRO_PORT } = process.env;

module.exports = { server: { port: Number(METRO_PORT) || 8081 } };

3. 在`package.json`中：
   ```json
   "scripts": {
     "start": "react-native start --port ${METRO_PORT:-8088}"
   }

常見問題與解決方案

1. 修改端口后應用無法連接

• 確保設備/模擬器與開發電腦在同一網絡
• 檢查防火墻設置是否允許新端口
• 嘗試使用IP地址而非localhost

2. 熱重載失效

# 重置緩存通?？梢越鉀Q
npx react-native start --reset-cache

3. Android設備無法訪問

在metro.config.js中添加：

module.exports = {
  server: {
    port: 8088,
    host: '0.0.0.0' // 允許通過IP訪問
  }
};

高級配置技巧

1. 動態端口分配

可以編寫腳本自動尋找可用端口：

// find-free-port.js
const portfinder = require('portfinder');

portfinder.getPortPromise({
  port: 8081,    // 起始端口
  stopPort: 9000 // 最大端口
}).then((port) => {
  console.log(`可用端口: ${port}`);
  // 可以在此啟動Metro
}).catch((err) => {
  console.error(err);
});

2. 使用環境變量

結合dotenv包管理不同環境的端口：

npm install dotenv

創建.env.development：

METRO_PORT=8088

在metro.config.js中：

require('dotenv').config({ path: '.env.development' });

module.exports = {
  server: {
    port: process.env.METRO_PORT || 8081
  }
};

3. 配置HTTPS

要使用HTTPS，修改metro.config.js：

const fs = require('fs');
const path = require('path');

module.exports = {
  server: {
    port: 8088,
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'cert.pem'))
    }
  }
};

總結

修改React Native項目的端口是一個常見但重要的配置任務。本文介紹了從臨時修改到永久配置的多種方法，涵蓋了Android和iOS平臺的適配，并提供了多項目管理和高級配置的建議。記?。?/p>

1. 臨時修改使用--port參數
2. 永久修改通過metro.config.js配置
3. 多項目開發時使用不同端口避免沖突
4. 修改后可能需要重置緩存
5. 高級場景可以使用動態端口和環境變量

合理配置端口可以避免開發中的許多問題，提高開發效率。希望本文能幫助你更好地管理React Native項目的端口配置。 “`