跳到主要內容

疑難排解

這些是在設定 React Native 時可能遇到的一些常見問題。如果您遇到此處未列出的問題,請嘗試在 GitHub 上搜尋該問題

連接埠已被佔用

Metro bundler 在連接埠 8081 上運行。如果另一個程序已在使用該連接埠,您可以終止該程序,或變更 bundler 使用的連接埠。

終止連接埠 8081 上的程序

執行以下命令以查找監聽連接埠 8081 的程序的 ID

shell
sudo lsof -i :8081

然後執行以下命令以終止該程序

shell
kill -9 <PID>

在 Windows 上,您可以使用資源監視器找到使用連接埠 8081 的程序,並使用工作管理員停止它。

使用 8081 以外的連接埠

您可以設定 bundler 使用 8081 以外的連接埠,方法是使用 port 參數,從您的專案根目錄運行

shell
npm start -- --port=8088

您還需要更新您的應用程式,以從新的連接埠載入 JavaScript bundle。如果在 Xcode 上從裝置運行,您可以通過在 ios/__App_Name__.xcodeproj/project.pbxproj 檔案中將 8081 的出現次數更新為您選擇的連接埠來完成此操作。

NPM 鎖定錯誤

如果您在使用 React Native CLI 時遇到類似 npm WARN locking Error: EACCES 的錯誤,請嘗試運行以下命令

shell
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules

React 缺少函式庫

如果您手動將 React Native 新增到您的專案中,請確保您已包含所有您正在使用的相關依賴項,例如 RCTText.xcodeprojRCTImage.xcodeproj。接下來,這些依賴項構建的二進制檔案必須連結到您的應用程式二進制檔案。使用 Xcode 專案設定中的「Linked Frameworks and Binaries」區段。更詳細的步驟在此處:連結函式庫

如果您正在使用 CocoaPods,請驗證您已將 React 以及 subspecs 新增到 Podfile。例如,如果您正在使用 <Text /><Image />fetch() API,您需要在 Podfile 中新增這些

pod 'React', :path => '../node_modules/react-native', :subspecs => [
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket',
]

接下來,確保您已運行 pod install 並且在您的專案中創建了一個安裝了 React 的 Pods/ 目錄。CocoaPods 將指示您從此以後使用生成的 .xcworkspace 檔案,以便能夠使用這些已安裝的依賴項。

當作為 CocoaPod 使用時,React Native 無法編譯

有一個名為 cocoapods-fix-react-native 的 CocoaPods 插件,它可以處理由於使用依賴項管理器而導致的原始程式碼的任何潛在後續修復。

參數列表過長:遞迴標頭展開失敗

在專案的構建設定中,「User Search Header Paths」和「Header Search Paths」是兩個設定,用於指定 Xcode 應在何處查找程式碼中指定的 #import 標頭檔案。對於 Pods,CocoaPods 使用一組特定的預設資料夾來查找。驗證此特定設定未被覆蓋,並且配置的資料夾都不太大。如果其中一個資料夾是一個大型資料夾,Xcode 將嘗試遞迴搜尋整個目錄,並在某個時候拋出上述錯誤。

要將「User Search Header Paths」和「Header Search Paths」構建設定還原為 CocoaPods 設定的預設值 - 選擇「Build Settings」面板中的條目,然後按刪除鍵。它將刪除自定義覆蓋並返回到 CocoaPod 預設值。

沒有可用的傳輸

React Native 為 WebSockets 實現了一個 polyfill。這些 polyfills 作為 react-native 模組的一部分初始化,您通過 import React from 'react' 將其包含在您的應用程式中。如果您載入另一個需要 WebSockets 的模組,例如 Firebase,請務必在 react-native 之後載入/require 它

import React from 'react';
import Firebase from 'firebase';

Shell 命令無回應異常

如果您遇到類似 ShellCommandUnresponsiveException 的異常

Execution failed for task ':app:installDebug'.
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

嘗試在 android/build.gradle 中將您的 Gradle 版本降級到 1.2.3

react-native init 卡住

如果您在系統中運行 npx react-native init 卡住時遇到問題,請嘗試在 verbose 模式下再次運行它,並參考 #2797 了解常見原因

shell
npx react-native init --verbose

當您除錯程序或需要更多了解拋出的錯誤時,您可能需要使用 verbose 選項來輸出更多日誌和資訊,以找出您的問題。

在您的專案根目錄中運行以下命令。

shell
npm run android -- --verbose

無法啟動 react-native 套件管理器 (在 Linux 上)

案例 1:錯誤 "code":"ENOSPC","errno":"ENOSPC"

問題是由 inotify (由 Linux 上的 watchman 使用) 可以監控的目錄數量引起的。要解決此問題,請在您的終端機視窗中運行此命令

shell
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

錯誤:spawnSync ./gradlew EACCES

如果您在 macOS 上執行 npm run androidyarn android 時遇到拋出上述錯誤的問題,請嘗試運行 sudo chmod +x android/gradlew 命令,使 gradlew 檔案成為可執行檔。