如何将 React-native-google-mobile-ads 与 Expo 和 Expo Go 结合使用？

Question

如何将 React-native-google-mobile-ads 与 Expo 和 Expo Go 结合使用？（例如横幅广告）

非常感谢世博会背景下的一个最小的例子。

截至 2022 年 5 月，所有在线 Google 文档均引用 expo-ads-admob，但 Expo 文档现在提到 expo-ads-admob 已弃用，并打算在 v46 中删除对该模块的支持。

世博会建议使用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 中工作，而不是纯粹的反应原生。

IMO，这个 react-native-google-mobile-ads 模块与 Expo Go 不兼容的原因也足以作为答案。

重申一下：如何将 React-native-google-mobile-ads 与 Expo 和 Expo Go 结合使用？非常感谢世博会背景下的一个最小的例子。

Answer 1

要将react-native-google-mobile-ads与Expo管理的工作流程结合使用，您需要使用EAS作为“开发客户端”来构建项目。开发客户端提供与 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"
  }
}