「Javascript/reactnative/admob/react-native-cli/react-native-admob」の版間の差分

2020年10月1日 (木) 17:42時点における最新版

react-native-admobインストール

yarn add react-native-admob@next

androidでの設定追加

android/build.gradle

allprojects {
    repositories {
        google()
    }
}

android/app/build.gradle

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

android/app/src/main/AndroidManifest.xml (idはAdMob公式のテストappId)

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

play-services-adsが見つからないと出る場合

以下のエラーが出るとき

Execution failed for task ':app:mergeExtDexDebug'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform play-services-ads-19.1.0.aar (com.google.android.gms:play-services-ads:19.1.0) to match attr

以下を入れる

android/app/build.gradle

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

iosでの追加設定

ios/Podfile

target 'AdMobDemo' do
  pod 'Google-Mobile-Ads-SDK'
end

$ cd ios 
$ pod install --repo-update
Installing react-native-admob (2.0.0-beta.6)
Installing Google-Mobile-Ads-SDK (7.62.0)

admobのappId追加（以下はadmob公式ios用のappId)

ios/AdMobDemo/Info.plist

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

iosのGoogleMobileAdsが見つからないエラー

以下エラーが出るとき

/node_modules/react-native-admob/ios/RNGADBannerView.h:7:9: fatal error: module 'GoogleMobileAds' not found

ios/Podfile

target 'AdMobDemo' do
  pod 'Google-Mobile-Ads-SDK'
end

上記を記載して、以下実行してるか確認

$ pod install --repo-update

サンプル

App.js

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import {
  AdMobBanner,
  AdMobInterstitial,
  AdMobRewarded,
} from 'react-native-admob'

export default class App extends React.Component {

  showInterstitial = async() => {
    AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
    if (Platform.OS === 'ios') {
      AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/4411468910'); // iOS
    } else {
      AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // android
    }
    await AdMobInterstitial.requestAd();
    await AdMobInterstitial.showAd();
  }

  showRewarded = async() => {
    AdMobRewarded.setTestDevices([AdMobRewarded.simulatorId]);
    if (Platform.OS === 'ios') {
      AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // iOS
    } else {
      AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/1712485313'); // android
    }
    await AdMobRewarded.requestAd();
    await AdMobRewarded.showAd();
  }
  render() {
    return (
      <View style={styles.container}>
        <Button
          title='Interstitial'
          onPress={this.showInterstitial}
          containerViewStyle={styles.interstitial}
        />
        <Button
          title='RewardVideo'
          onPress={this.showRewarded}
          containerViewStyle={styles.rewarded}
        />
        <AdMobBanner
          style={styles.banner}
          adSize='mediumRectangle'
          adUnitID={
            Platform.select({
              ios: 'ca-app-pub-3940256099942544/2934735716',
              android: 'ca-app-pub-3940256099942544/6300978111',
            })
          }
          testDevices={[AdMobBanner.simulatorId]}
          onAdFailedToLoad={error => console.error(error)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  rewarded: {
    width: '100%',
    marginLeft: 0
  },
  interstitial: {
    width: '100%',
    marginLeft: 0
  },
  banner: {
    position: 'absolute',
    bottom: 0
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

動作検証

android、iosともに表示された。

インステは動画じゃなくて静止画のみだった。(2020/7/20時点)

async-awaitを使う場合

AdMobRewarded.requestAd().then(() => AdMobRewarded.showAd());

上記を以下のようにもかける。functionをasyncで囲む

await AdMobRewarded.requestAd();
await AdMobRewarded.showAd();

バナーサイズ

adSizeに以下の通り設定する

banner	320x50
largeBanner	320x100
mediumRectangle	300x250
fullBanner	468x60
leaderboard	728x90
smartBannerPortrait Screen width x 32|50|90
smartBannerLandscape Screen width x 32|50|90

参考

GoogleMobileAds追加 https://qiita.com/juginon/items/7f4ee4273b2c480277f3

サンプルコード：https://github.com/sbugert/react-native-admob/blob/master/Example/App.js