React Native集成Google AdMob横幅广告的详细指南

2024-03-20 22:48:25

在 React Native 中集成 Google AdMob 横幅广告的完整指南

对于 React Native 开发人员来说，集成 Google AdMob 横幅广告是一种简单有效的方式，可以向用户展示广告并从中获利。在本指南中，我们将详细介绍如何使用 react-native-google-mobile-ads 库实现这一目标。

1. 安装库

首先，通过以下命令安装 react-native-google-mobile-ads 库：

npm install react-native-google-mobile-ads

2. 链接原生库 (仅限 Android)

对于 Android 应用，需要链接原生库。在 android/app/build.gradle 文件中添加以下内容：

dependencies {
  implementation 'com.google.android.gms:play-services-ads:21.0.0'
}

3. 配置应用

在 app.json 文件中，配置你的 Android 应用 ID：

"react-native-google-mobile-ads": {
  "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
}

4. 初始化 SDK

在 React Native 应用中，初始化 Google Mobile Ads SDK：

useEffect(() => {
  const initializeAds = async () => {
    try {
      await mobileAds().setRequestConfiguration({
        testDeviceIdentifiers: ['EMULATOR'],
      });

      await mobileAds().initialize();

      console.log('Google Mobile Ads SDK initialized successfully.');
    } catch (error) {
      console.error('Error initializing Google Mobile Ads SDK:', error);
    }
  };

  initializeAds();

  return () => {
    // Cleanup code here if needed
  };
}, []);

5. 创建和展示横幅广告

最后，在应用中创建并展示横幅广告：

import { BannerAd, BannerAdSize } from 'react-native-google-mobile-ads';

const BannerAdExample = () => {
  return (
    <BannerAd
      size={BannerAdSize.FULL_BANNER}
      unitId={TestIds.BANNER}
    />
  );
};