React Native Google 移动广告不起作用。安装 npm add react-native-google-mobile-ads 后，我遇到了一些错误，请检查以下错误

Question

安装 npm add react-native-google-mobile-ads 后出现错误。我在这里发布了错误，请检查，这里我添加了我的 android build.gradle 文件和应用程序级别 build.gradle 文件 *如何指定compileSdkVersion？ *

1: Task failed with an exception.
        -----------
        * Where:
        Build file 'C:\Users\Admin\Desktop\ReactNative\Firebase\hellworldfirebaseeekkl\node_modules\react-native-google-mobile-ads\android\build.gradle' line: 75
        * What went wrong:
        A problem occurred evaluating project ':react-native-google-mobile-ads'.
        > Cannot get property 'googleMobileAdsJson' on extra properties extension as it does not exist
        * Try:
        > Run with --stacktrace option to get the stack trace.
        > Run with --info or --debug option to get more log output.
        > Run with --scan to get full insights.
        ==============================================================================
        2: Task failed with an exception.
        -----------
        * What went wrong:
        A problem occurred configuring project ':react-native-google-mobile-ads'.
        > compileSdkVersion is not specified. Please add it to build.gradle
        * Try:
        > Run with --stacktrace option to get the stack trace.
        > Run with --info or --debug option to get more log output.
        > Run with --scan to get full insights.

我的APP（build.gradle文件）

android {
        ndkVersion rootProject.ext.ndkVersion
    compileSdkVersion rootProject.ext.compileSdkVersion
     defaultConfig {
            applicationId "com.hellworldfirebaseeekkl"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion
            versionCode 1
            versionName "1.0"
            buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
    if (isNewArchitectureEnabled()) {
                // We configure the NDK build only if you decide to opt-in for the New Architecture.
                externalNativeBuild {
                    ndkBuild {
                        arguments "APP_PLATFORM=android-21",
                            "APP_STL=c++_shared",
                            "NDK_TOOLCHAIN_VERSION=clang",
                            "GENERATED_SRC_DIR=$buildDir/generated/source",
                            "PROJECT_BUILD_DIR=$buildDir",
                            "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
                            "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
                            "NODE_MODULES_DIR=$rootDir/../node_modules"
                        cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
                        cppFlags "-std=c++17"
                        // Make sure this target name is the same you specify inside the
                        // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
                        targets "hellworldfirebaseeekkl_appmodules"

我的android项目build.gradle文件

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31

        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = "21.4.7075529"
        }
    }
    repositories {
        google()
        mavenCentral()

Answer 1

在 React Native 项目的根目录中，打开 app.json 文件并使用 Google AdMob 控制台中的 ID 添加 android_app_id 和 ios_app_id 键：

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

复制 如果您是expo用户，请确保react-native-google-mobile-ads块位于expo块之外！它应该看起来像这样：

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

复制 为了使更改生效，请重建您的项目：

# For iOS
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

更多：https://docs.page/invertase/react-native-google-mobile-ads#setting-up-google-admob

Answer 2

就我而言，我在我的 AdMob 帐户中使用了 Google 提供的测试 android_app_id，它们导致了崩溃。然后我发现了另一个测试广告ID：

"react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }

他们成功了。

Answer 3

这是您的设置配置问题，您可以使用以下方法测试您的广告：

app.json

{
  "name": "appname",
  "displayName": "appname",
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "ios_app_id": "ca-app-pub-3940256099942544~3347511713"
  }
}