如何在React Native中添加Google广告

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

步骤

1. 设置Google AdMob账户
2. 添加react-native-google-mobile-ads模块
3. 在移动应用中添加横幅、插页式和激励广告
4. 运行和输出

步骤1: 设置Google AdMob账户

1. 首先注册Google AdMob账户,如果你已经有账户可以直接跳到步骤2。

2. 创建新应用: 应用 -> 添加应用。

3. Google Ads将生成两个ID:应用ID和广告单元ID。

4. 添加横幅、插页式和激励广告: 应用 -> 选择当前 -> 广告单元。

步骤2: 添加react-native-google-mobile-ads模块

1. 安装react-native-google-mobile-ads模块:

yarn add react-native-google-mobile-ads

2. 更新app.json文件:

// <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"
  }
}

在Google AdMob账户中,在"应用设置"菜单项下,你可以找到"应用ID"。

现在,你可以将应用ID粘贴到app.json文件中的"android_app_id"和"ios_app_id"中。

步骤3: 在移动应用中添加横幅、插页式和激励广告

#1. 横幅广告:-

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

const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function App() {
  return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
    />
  );
}
export default App;

#2. 插页式广告:-

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

const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
  keywords: ['fashion'],
});

function FinalApp() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const unsubscribe = interstitial.addAdEventListener(AdEventType.LOADED, () => {
      setLoaded(true);
    });

    // 立即开始加载插页式广告
    interstitial.load();

    // 在组件卸载时取消事件订阅
    return unsubscribe;
  }, []);

  // 广告还没准备好显示
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="显示插页式广告"
      onPress={() => {
        interstitial.show();
      }}
    />
  );
}
export default FinalApp;

#3. 激励广告:-

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

const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const rewarded = RewardedAd.createForAdRequest(adUnitId, {
  keywords: ['fashion', 'clothing'],
});

function FinalApp() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const unsubscribeLoaded = rewarded.addAdEventListener(RewardedAdEventType.LOADED, () => {
      setLoaded(true);
    });
    const unsubscribeEarned = rewarded.addAdEventListener(
      RewardedAdEventType.EARNED_REWARD,
      reward => {
        console.log('用户获得了奖励 ', reward);
      },
    );

    // 立即开始加载激励广告
    rewarded.load();

    // 在组件卸载时取消事件订阅
    return () => {
      unsubscribeLoaded();
      unsubscribeEarned();
    };
  }, []);

  // 广告还没准备好显示
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="显示激励广告"
      onPress={() => {
        rewarded.show();
      }}
    />
  );
}
export default FinalApp;

步骤4:运行和输出

首先从手机卸载应用,然后使用以下命令再次在手机上安装应用:

yarn android

谢谢 😊

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

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