如何在 React Native 中展示广告？

移动广告始终被认为是应用程序货币化的最佳部分，因此我们决定在我们的应用程序中集成 Google Admob，这将使我们能够在 ios 和 android 上展示广告。

在浏览了各种文章、阅读了 Google 的 AdMob 官方文档以及一些零散的信息后，我决定写一篇博客，将所有内容都集中到一起。

我们可以按照以下两个步骤非常轻松地集成 Google Admob。

• Admob 帐户设置
• 代码级集成

Admob 帐户设置

首先，您需要从这里创建一个 AdMob 帐户才能开始使用 Google AdMob 服务。

在 AdMob 成功创建帐户后，您需要创建一个以其名称平台（ios 或 android）命名的应用程序。

一旦创建应用程序，您将获得如下所示的 appId，它将用于将所有广告定位到特定的应用程序。

App ID : ca-app-pub-3940256099942544~1458002511

现在我们有了一个在 Admob 上注册的 App ID，可以尝试创建一些广告了。您可以选择横幅广告、插页广告和奖励广告。我们这里以一个简单的横幅广告为例。

现在，最后也是最重要的一步是设置 Admob 帐户。
我们必须创建一个广告位，这是我们在 ios 和 android 应用中使用的广告位，可以在其中定位我们的广告。

下一步我们将使用刚刚创建的广告位进行代码级集成。

Ad Unit Id : ca-app-pub-3940256099942544/6300978111

注意：仅当您在此处完成付款信息后，广告才会开始在上述 adSlot Id 上投放，并且如果是新帐户，则可能需要一些时间才能开始投放广告。

代码级集成

react-native-admob我们需要安装一个在 React Native 应用中使用 Google Admob 的库。

npm i -S react-native-admob@next

然后运行

react-native 链接 react-native-admob

iOS 应用程序开箱即用，不允许您在应用程序上显示广告，为此我们必须添加GoogleMobileAds.framework。

将上述框架导入我们的应用程序的最简单方法是通过 CocoaPods。在您的 Podfile 中添加以下行。

pod‘Google-Mobile-Ads-SDK’

然后运行以下命令

pod安装--repo-update

有关 Google 移动广告框架的更多信息，您可以阅读此处。

现在让我们添加appId我们adUnitId从在 android 和 ios 代码中设置的帐户中获得的用于显示广告的内容。

iOS

应将 AdMob 应用程序 ID 添加到 Info.plist。

 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-3940256099942544~1458002511</string>

安卓

在AndroidManifest.xml中添加Admob应用程序id（com.google.android.gms.ads.APPLICATION_ID）

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~1458002511"/>

react-native-admob 使用

实现起来react-native-admob非常简单，我只需导入“AdMobBanner”并将 adSlot Id 传递给它。

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import {AdMobBanner} from 'react-native-admob';

const App = () => {
  const onFailToRecieveAd = (error) => console.log(error);

  return (
    <>
      <SafeAreaView>
        <AdMobBanner
          adSize="largeBanner"
          adUnitID="ca-app-pub-3940256099942544/6300978111"
          testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
          didFailToReceiveAdWithError={onFailToRecieveAd}
        />
      </SafeAreaView>
    </>
  );
};

export default App;

就是这样 :)，您将在您的应用上看到广告🍻

如果您遇到任何问题，您可以在 Github Repo中找到上述示例