如何将 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