为 React Native 设置 Google 移动广告 SDK

如需投放广告并赚取收入，请将 Google Mobile Ads SDK for React Native 集成到您的 React Native 原生应用中。本指南介绍了如何安装和初始化 Google Mobile Ads SDK for React Native，以及如何选择广告格式。

前提条件

在继续操作之前，请获取以下信息：

  • React Native 0.85.0 或更高版本。
  • AdMob 账号和应用 ID。如需获取应用 ID，请参阅在 AdMob 中设置应用。

  • 以下 Android 内容：

    • Android API 级别 24 或更高级别。
    • 最新版本的 Android Studio。
    • Android Gradle 插件 (AGP) 8.0 或更高版本。

  • 以下 iOS 内容：

    • iOS 13.0 或更高版本。
    • Xcode 16.0 或更高版本，且已启用命令行工具。
    • CocoaPods

安装 Google Mobile Ads SDK for React Native

如需安装 Google Mobile Ads SDK for React Native，请执行以下操作：

  1. 从 Google 云端硬盘下载 gma-sdk-react-native 文件夹。

  2. 将 ZIP 归档文件解压到工作项目目录之外的单独目录中。此过程可能会避免与项目的配置文件发生冲突。

  3. 在项目根目录中，创建一个 local_packages/ 目录。

  4. 在此目录中，复制 mobile-ads-0.1.0.tgz 文件：

    mkdir -p local_packages
cp EXTRACT_DIR/gma-sdk-react-native/google-mobile-ads/mobile-ads-0.1.0.tgz local_packages/

    将 EXTRACT_DIR 替换为解压缩归档文件的目录的路径。

  5. 使用您首选的软件包管理器安装该软件包：

    npm

    npm install ./local_packages/mobile-ads-0.1.0.tgz

    纱线

    yarn add ./local_packages/mobile-ads-0.1.0.tgz

配置您的应用

如需为应用配置平台依赖项，请将 AdMob 应用 ID 添加到项目根目录的 app.json 文件中。

在测试期间，请使用以下示例中显示的示例 AdMob 应用 ID：

{
  "name": "APP_NAME",
  "displayName": "APP_NAME",
  "googleMobileAds": {
    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }
}

在构建期间，Google Mobile Ads SDK for React Native 会将 android_app_id 属性添加到 AndroidManifest.xml 文件中，并将 ios_app_id 属性作为 GADApplicationIdentifier 键添加到构建的 Info.plist 文件中。

如需了解特定于平台的选项或手动配置，请选择以下平台之一：

Android

如果您管理多个 build 配置，或者要将 React Native 集成到现有 Android 应用中，请在项目的 AndroidManifest.xml 文件（而非 app.json 文件）的 <application> 元素中添加 AdMob 应用 ID：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
  <application>
    <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="SAMPLE_APP_ID"
        tools:replace="android:value"/>
  </application>
</manifest>

Gradle 会在构建期间自动解析 Android 依赖项。

iOS

请完成以下步骤：

  1. 从项目的 ios/ 目录安装 CocoaPods 依赖项：

    pod install --repo-update

    或者，从项目根目录安装 CocoaPods 依赖项：

    npx pod-install

    CocoaPods 自动关联会配置 Xcode 构建阶段脚本，该脚本会将 app.json 文件中的 ios_app_id 属性添加到构建的 Info.plist 文件中。

  2. 在应用的 Info.plist 文件中，为 Google cstr6suwn9.skadnetwork 和部分第三方买方在 <dict> 元素中添加 SKAdNetworkItems 键。

    以下示例展示了一个完整的 Info.plist 文件，其中包含必需的 SKAdNetworkItems 数组：

    完整示例

    <key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4fzdc2evr5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2fnua5tdw4.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ydx93a7ass.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>p78axxw29g.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v72qych5uu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ludvb6z3bs.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cp8zw746q7.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3sh42y64q3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c6k4g5qg8m.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>s39g8k73mm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wg4vff78zm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qy4746246.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>f38h382jlk.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>hs6bdukanm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>mlmmfzh3r3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v4nxqhlyqp.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wzmmz9fp6w.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>su67r6k2v3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>yclnxrl5pm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>t38b2kh725.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>7ug5zh24hu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>gta9lk7p23.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>vutu7akeur.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>y5ghdn5j9k.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v9wttpbfk9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>n38lu8286q.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>47vhws6wlr.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbd757ywx3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>9t245vhmpl.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>a2p9lx4jpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>22mmun2rn5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>44jx6755aq.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>k674qkevps.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4468km3ulz.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2u9pt9hc89.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8s468mfl3y.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>klf5c3l5u5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ppxm28t8ap.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbmxgpxpgc.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>uw77j35x4d.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>578prtvx9j.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4dzt52r2t5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>tl55sbb4fm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c3frkrj4fj.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>e5fvkxwrpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8c4e2ghe7u.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3rd42ekr43.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>97r2b46745.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qcr597p9d.skadnetwork</string>
  </dict>
</array>

初始化 Google Mobile Ads SDK for React Native

在加载广告之前，请先调用 initialize 方法来初始化 Google Mobile Ads SDK for React Native。在应用启动时调用一次 initialize 方法，例如在根 App.tsx 组件中调用。

以下示例会初始化 Google Mobile Ads SDK for React Native：

import {InitializationStatus, initialize} from '@google/mobile-ads';
import {useEffect, useState} from 'react';
import {Text, View} from 'react-native';

/**
 * Root application component demonstrating Google Mobile Ads SDK initialization.
 */
export function App() {
  const [isInitialized, setIsInitialized] = useState<boolean>(false);

  useEffect(() => {
    // Initialize the Google Mobile Ads SDK.
    initialize({}, (status: InitializationStatus) => {
      console.log('Mobile Ads SDK initialized successfully:', status);
      setIsInitialized(true);
    });
  }, []);

  return (
    <View>
      <Text>
        {isInitialized ? 'Mobile Ads SDK Ready' : 'Initializing SDK...'}
      </Text>
    </View>
  );
}

选择广告格式

初始化 Google Mobile Ads SDK for React Native 后，您就可以植入广告了。AdMob 提供以下广告格式：

格式 说明 文档
应用启动 在用户打开或切换回您的应用时展示，会叠加在加载屏幕或启动画面上。 设置开屏广告
插页式广告 插页式广告是全屏广告，会覆盖所在应用的整个界面。这些广告通常会在应用流程的自然过渡点（例如活动之间的切换处或游戏关卡之间的暂停时段）展示。 设置插页式广告
已获得奖励 这是一种全屏广告，用户观看视频广告或与试玩广告互动后可获得相应奖励。 设置激励广告
插页式激励广告 一种激励广告格式，可让您在应用中的自然过渡点自动展示广告，并向观看广告的用户提供奖励。 设置插页式激励广告