來源:npm @react-native-firebase/app
考慮到每個平台所需的獨特配置,在 Android 和 iOS 上設定並順利運行通知有時可能具有挑戰性。
本指南將引導您在 React Native 中設定 Firebase Cloud Messaging (FCM) 的重要步驟並解決一些常見錯誤:
設定 Firebase:
下載 GoogleService-Info.plist (iOS) 和 google-services.json (Android)。
從您的電腦中選擇下載的 GoogleService-Info.plist 文件,並確保啟用「根據需要複製項目」複選框
下載 google-services.json 檔案並將其放置在專案內的以下位置:
/android/app/google-services.json.
在 Xcode 中啟用 iOS 推播通知:
需要將推播通知功能加入項目。這可以透過「簽名和功能」標籤下的「功能」選項來完成:
點選“功能”按鈕。
搜尋「推播通知」。
選擇後,此功能將顯示在其他啟用的功能下方。如果搜尋時沒有出現選項,則該功能可能已啟用
需要啟用後台模式功能以及背景取得和遠端通知子模式。這可以透過「簽名和功能」標籤上的「功能」選項來新增。
現在,確保「後台取得」和「遠端通知」子模式都已啟用
React Native FCM 設定指南:
遵循官方 Firebase 雲端訊息傳遞設定指南。本指南包括開始在 Android 和 iOS 上發送和接收通知的基本步驟。完成這些步驟後,您可以透過撰寫新的廣告系列,直接從 Firebase 控制台的「訊息」下測試通知。
注意:
對於 M1 Mac 用戶來說,設定 React Native Firebase 時 CocoaPods 的問題很常見。以下是一些快速解決方案:
arch -x86_64 pod install
arch -x86_64 pod 儲存庫更新
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
在為 React Native 專案安裝和管理 pod 時,遵循這些步驟應該有助於解決 M1 Mac 上特定於架構的問題。
注意:
對於 Android 13 設備,您需要明確請求推播通知的執行時間權限。將以下權限加入您的 AndroidManifest.xml:
然後,在您的程式碼中,在執行時間請求通知權限。你可以像這樣直接處理Android權限:
import { Platform, PermissionsAndroid } from 'react-native'; async function requestNotificationPermission() { // Version >= 33(`~project/build.gradle`) if (Platform.OS === 'android' ) { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('Notification permission granted'); } else { console.log('Notification permission denied'); } } }
在應用初始化期間或訂閱通知之前呼叫 requestNotificationPermission() 以確保使用者已授予權限。
確保相容性:
在深入設定之前,請確保 @react-native-firebase/app 和 @react-native-firebase/messaging 套件已安裝在您的專案中並且相容。
一致的版本對於避免意外的整合問題至關重要。若要驗證版本相容性,請參閱官方 React Native Firebase 發行文件。
確保您安裝了這兩個軟體包的最新版本,以避免相容性問題。
如果您在 iOS 裝置上進行測試,請注意以下事項:
故障排除提示:
完成設定後,您可能仍會遇到問題。以下是一些常見問題和解決方案:
模擬器未收到通知:
如果 iOS 模擬器中沒有出現通知,請嘗試以下操作:
我自己排查了幾個小時後,發現快速重啟是最簡單的解決方案!
檢查步驟與常見問題:
仔細檢查 Firebase 指南中的設定步驟,確保所有設定都正確。
安裝 CocoaPods 時發生錯誤:
如果您遇到安裝錯誤,例如:
<br> error: RPC failed; curl stream was reset<br> error: 6428 bytes of body are still expected<br>
這可能是由於網路問題造成的。嘗試從 Wi-Fi 切換到行動熱點(反之亦然),然後重試安裝。有時,更改網路可以解決與連接相關的 Pod 安裝問題。如果這不能解決問題,您可能需要嘗試其他故障排除提示,例如清除 CocoaPods 快取或更新 Xcode。
在 iOS 中允許 HTTP URL(應用程式傳輸安全):
如果您使用 HTTP URL 進行 API 請求(而不是 HTTPS),則需要更新 iOS Info.plist 文件,以避免因應用程式傳輸安全性 (ATS) 限製而阻止連線。在 Info.plist 檔案中新增以下行:
import { Platform, PermissionsAndroid } from 'react-native'; async function requestNotificationPermission() { // Version >= 33(`~project/build.gradle`) if (Platform.OS === 'android' ) { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('Notification permission granted'); } else { console.log('Notification permission denied'); } } }
這將允許您的應用程式不受干擾地發出 HTTP 請求。在生產應用程式中謹慎對待此設置,並儘可能將其限制在開發環境中。
確保應用程式傳輸安全 (ATS) 相容性:
對於 iOS,請確保您使用的任何 HTTPS 端點均符合 ATS 標準。如果您使用臨時伺服器或自簽名憑證進行測試,請確保它們與 ATS 相容,因為 Firebase 需要安全連線才能與 APN(Apple 推播通知服務)進行通訊。
結論:
在 React Native 中設定 Firebase Cloud Messaging 非常簡單,但輕微的設定錯誤或裝置配置怪癖可能會導致問題。遵循本指南和故障排除提示應該可以幫助您順利執行通知。對於任何其他問題,您可以查看官方文件、論壇或 GitHub 討論,尋找其他開發者分享的解決方案。
編碼快樂!!!!!
以上是排查 React Native Firebase 的常見問題 - 雲端訊息傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章!