React Native 0.63 以其他端口運行在設備上的方法

longneckduck -

React Native Metro需要在端口8081上運行。不幸的是，鴨子公司的電腦裡面McAfee防病毒軟件正在使用端口8081來運行。

在React Native官方的網站上，提供了兩種解決方法：終止進程在端口8081上process，或使用8081以外的端口。

第一個解決方法終止進程在端口8081上process即使可行，這也不是一個好的解決方法，因為您將終止電腦上的防病毒保護。 但是，運行中的McAfee防病毒程序，以官方的網站上的方法是沒有用的，kill -9 命令不起作用。

使用8081以外的端口的解決方法是更好的解決方法。 可是官網寫的方法不是很清楚，所以鴨子在這裡分享鴨子成功的方法給大家。

經過反複試驗，鴨子終於找到了解決方法。

ReactNative運行在蘋果iOS手機或模擬器的方法

  1. 首先先運行Metro bundler以端口8070，你可以把8070改成你想要的端口，只是要先確定相關的端口是否有其他程式在運行。

    npx react-native start --port=8070

  2. 在ios文件夾裡面打開 reactnativelearning.xcworkspace 文件

  3. 搜索並更改文件裡面的8081，將8081替換為8070，以下是需要更改的文件

    RCTBridgeDelegate.h
    RTCDefines.h
    RCTInspectorDevServerHelper.mm
    RCTDevMenu.mm

  4. 然後到 Signing & Capabilities 更改您自己的開發人員詳細信息

  5. 再到 Build Phases 裡面的 "Start Packager" 把Shell script 裡面的8081也改去8070

  6. 在x-code按Run並在設備上啟動我們的手機應用程式，到這裡你應該成功在蘋果iOS手機上看到你的程式在運行了！

  7. 第一次啟動時，如果Fast Refresh不起作用，你需要搖一搖你的手機打開React Native開發者menu.按"Reload"來啟用相關功能

在iOS模擬器上運行的命令
npx react-native run-ios --port 8070

在iOS設備上調試的命令
npx react-native run-ios --device "你iOS設備名稱" --port 8070

ReactNative運行在android手機或模擬器的方法

Android比iOS簡單，只需在命令上更改端口並反轉tcp端口便可以了。

  1. 首先也是一樣先運行Metro bundler以端口8070，
    npx react-native start --port=8070

  2. 以Android Studio打開你的ReactNative項目,裡面的android文件夾

  3. 通過以下命令反轉tcp端口
    adb reverse tcp:8081 tcp:8070

  4. 現在在Android Studio上Build&Run你的手機或模擬器便可！

在android模擬器上運行的命令
npx react-native run-android --port 8070

在android設備上調試的命令
npx react-native run-android --deviceId=你設備的識別號碼 --port 8070

您可以使用以下命令找到你設備deviceId
adb devices

Dependencies 版本

react 16.13.1
react-native 0.63.3

Developer IDE version

Xcode 12.0.1
Android Studio Version 4.1

移動設備操作系統

Android 11
iOS 14.0.1