2024 年，如何在React Native 中设置 Google 广告

将 Google Ads 集成到你的 React Native 应用程序中是通过广告来盈利的极佳方式。本指南将指导使用 react-native-google-mobile-ads 包设置 Google Ads，该包支持 Android 和 iOS 平台。

开始之前，请确保你有以下内容：

• 一个 React Native 项目的设置。
• 对 React Native 开发的基础知识。
• 一个 Google AdMob 账户以及 Android 和 iOS 的广告单元 ID。

1. 安装依赖项

首先，安装 react-native-google-mobile-ads 包及其对等依赖项：

# npm
npm install react-native-google-mobile-ads @react-native-firebase/app

# yarn
yarn add react-native-google-mobile-ads @react-native-firebase/app

2.链接本地依赖项

将本地依赖关联到你的项目：

# For iOS
cd ios
pod install
cd ..

# For Android, no additional linking is needed if you are using React Native 0.60 or higher.

3. 配置 Firebase

Google Mobile Ads 需要 Firebase，因此需要为项目设置 Firebase。

iOS 配置：

1. 转到 Firebase 控制台，创建一个新项目，并向其中添加一个 iOS 应用。
2. 下载 GoogleService-Info.plist 文件并将其放在您的 ios/YourProjectName 目录中。
3. 将以下内容添加到 ios/YourProjectName/AppDelegate.m ：

#import <Firebase.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [FIRApp configure];
  ...
}

Android 配置：

1. 在 Firebase 控制台中，向项目添加一个 Android 应用。
2. 下载 google-services.json 文件并将其放在您的 android/app 目录中。
3. 修改 android/build.gradle 和 android/app/build.gradle ：

// android/build.gradle
buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.3'
    }
}

// android/app/build.gradle
apply plugin: 'com.google.gms.google-services'

4. 设置 AdMob

通过将 AdMob 应用 ID 添加到 Info.plist 和 AndroidManifest.xml ，配置应用以使用 Google AdMob。

iOS 配置：将以下内容添加到您的 ios/YourProjectName/Info.plist ：

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string> <!-- Replace with your AdMob App ID -->

Android 配置：将以下内容添加到你的 android/app/src/main/AndroidManifest.xml ：

<application>
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx"/> <!-- Replace with your AdMob App ID -->
</application>

5. 实施广告组件

现在，可以开始在您的 React Native 应用程序中展示广告。 react-native-google-mobile-ads 包支持各种广告格式，包括横幅广告，插页式广告和奖励广告。

Displaying a Banner Ad: 显示横幅广告：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const App = () => {
  return (
    <View style={styles.container}>
      <BannerAd
        unitId={TestIds.BANNER} // Replace with your actual Ad unit ID
        size={BannerAdSize.FULL_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

显示一个插页广告：

import React, { useEffect } from 'react';
import { Button } from 'react-native';
import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
  requestNonPersonalizedAdsOnly: true,
});

const App = () => {
  useEffect(() => {
    const unsubscribe = interstitial.onAdEvent((type) => {
      if (type === AdEventType.LOADED) {
        interstitial.show();
      }
    });

    interstitial.load();

    return unsubscribe;
  }, []);

  return (
    <Button title="Show Interstitial Ad" onPress={() => interstitial.load()} />
  );
};

export default App;

显示一个奖励广告：

import React, { useEffect } from 'react';
import { Button } from 'react-native';
import { RewardedAd, RewardedAdEventType, TestIds } from 'react-native-google-mobile-ads';

const rewardedAd = RewardedAd.createForAdRequest(TestIds.REWARDED, {
  requestNonPersonalizedAdsOnly: true,
});

const App = () => {
  useEffect(() => {
    const unsubscribe = rewardedAd.onAdEvent((type, error, reward) => {
      if (type === RewardedAdEventType.LOADED) {
        rewardedAd.show();
      }
      if (type === RewardedAdEventType.EARNED_REWARD) {
        console.log('User earned reward of ', reward);
      }
    });

    rewardedAd.load();

    return unsubscribe;
  }, []);

  return (
    <Button title="Show Rewarded Ad" onPress={() => rewardedAd.load()} />
  );
};

export default App;

总结

通过遵循这些步骤，您已成功在您的 React Native 应用中设置了 Google 广告。这种集成使您能够有效地盈利您的应用。根据您的需要定制和管理您的广告，以在保持积极的用户体验的同时最大化您的收入。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。