React NativeアプリでGoogleAdmob広告を表示する方法

2 min read読了の目安(約2100字
  1. GoogleAdmobを開いてログイン

  2. AdMoBアカウントを作成

  3. アプリ→アプリ追加
    100

  4. アプリを検索して追加する

  5. Mobile Ads SDK をインポートするPodfileに書き込む

pod 'Google-Mobile-Ads-SDK'
$ pod install --repo-update
Analyzing dependencies
Downloading dependencies
Installing Google-Mobile-Ads-SDK (7.68.0)
Installing GoogleAppMeasurement (7.1.0)
Installing GoogleUserMessagingPlatform (1.4.0)
Installing GoogleUtilities (7.1.1)
Installing PromisesObjC (1.2.11)
Installing nanopb (2.30906.0)
Generating Pods project
Integrating client project
Pod installation complete! There are 39 dependencies from the Podfile and 42 total pods installed.
  1. 追加したアプリの広告ユニットのアプリIDをInfo.plistに書き込む
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-2275084682351870~3490412043</string>
  1. AppDelegate書き込み
@import GoogleMobileAds; //@implementation AppDelegateの上に書かないとエラー

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  [[GADMobileAds sharedInstance] startWithCompletionHandler:nil];
  return YES;
}

@end
  1. アプリの広告ユニットを追加

  2. AdMobでアプリを登録した時に表示される広告ユニットID

  3. 実際にコードに落とし込む>その後キャッシュクリアしてビルド1

$ npm i --save react-native-admob@next
// ネイティブ広告を選択
$ npm i react-native-admob-native-ads
$ react-native link react-native-admob
import {AdMobBanner} from 'react-native-admob';
<AdMobBanner
    adSize="fullBanner"
    adUnitID="AdMobでアプリを登録した時に表示される広告ユニットID"
    testDevices={[AdMobBanner.simulatorId]}
    onAdFailedToLoad={(error) => console.error(error)}
  />