如何將 react-native-google-mobile-ads 與 Expo 和 Expo Go 一起使用？

Question

如何將 react-native-google-mobile-ads 與 Expo 和 Expo Go 一起使用？ （例如橫幅廣告）

非常感謝 Expo 上下文中的一個最小示例。

截至 2022 年 5 月的所有在線谷歌文檔都提到了 expo-ads-admob，但 Expo 文檔現在提到 expo-ads-admob 已被棄用，並打算在 v46 中刪除對該模塊的支持。

Expo 建議使用 react-native-google-mobile-ads。 當我將該模塊集成到項目中時，當我通過 Expo Go（和 Metro）啟動應用程序時發生崩潰。我目前正在使用 Android 進行測試。

Invariant Violation: requireNativeComponent: "RNGoogleMobileAdsBannerView" was not found in the UIManager.                                                                                  
                                                                                              
This error is located at:                                                                     
    in RNGoogleMobileAdsBannerView (created by BaseAd)                                        
    in BaseAd (created by BannerAd)                                                           
    in BannerAd (created by App)                                                              
    in RCTView (created by View)                                                              
    in View (created by App)                                                                  
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

我認為這個錯誤與鏈接有關，但我明確試圖讓它在 Expo 內工作，而不是純粹的 react-native。

IMO，此 react-native-google-mobile-ads 模塊與 Expo Go 不兼容的原因也足以作為答案。

重申一下：如何將 react-native-google-mobile-ads 與 Expo 和 Expo Go 一起使用？ 非常感謝 Expo 上下文中的一個最小示例。

Answer 1

要將 react-native-google-mobile-ads 與 Expo 托管工作流一起使用，您需要使用 EAS 作為“開發客戶端”構建您的項目。 dev-client 提供與 Expo Go 類似的功能和便利。主要區別在於您需要在本地設置有效的 EAS 構建環境或使用 Expo 提供的雲構建。

假設您有一個本地 EAS 構建設置並且想要為 android 構建：

# Install the ad module
expo install react-native-google-mobile-ads

# Install the dev-client module
expo install expo-dev-client

# Build the dev-client (as an APK)
eas build --platform android --profile development --local

# Note: Install the built APK into emulator or device.

# Start the expo service for the dev client
expo start --dev-client --lan

安裝 APK 並設置服務后，您可以通過掃描二維碼通過 Expo Go 加載應用程序。

注意：不要將 react-native-google-mobile-ads 配置放在 app.json 配置的 expo 部分。 這個錯誤讓我深入研究了 react-native-google-mobile-ads 的 build.gradle 代碼。

// app.json
{
  "expo": {
  // ...
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

Answer 2

expo 的 V46 有一些問題。 我用的是 expo V45，效果很好。

Answer 3

您必須為 expo 完成此步驟

npx pod-install
npx react-native run-ios

# For Android
npx react-native run-android

# For expo users not using EAS
npx expo prebuild

# For expo users using EAS
npx eas-cli build --profile development