Expoでadmobを組み込んだ時の超個人的メモ

Expoにadmobがついているので試してみた。
サードパーティーライブラリに頼らなくても広告を載せれるのはすごい便利。

// App.js
import React from "react"
import { Button, StyleSheet, View } from "react-native"
import { AdMobBanner,PublisherBanner, AdMobInterstitial, AdMobRewarded } from "expo"
export default class App extends React.Component {

  bannerError() {
    console.log("An error")
  }

  async showInterstitial() {
    AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712') // Test ID, Replace with your-admob-unit-id
    AdMobInterstitial.setTestDeviceID('EMULATOR')
    await AdMobInterstitial.requestAdAsync()
    await AdMobInterstitial.showAdAsync()
  }

  async showRewarded() {
    AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917') // Test ID, Replace with your-admob-unit-id
    AdMobRewarded.setTestDeviceID('EMULATOR')
    await AdMobRewarded.requestAdAsync()
    await AdMobRewarded.showAdAsync()
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          title="Interstitialバナー クリックで遷移"
          onPress={this.showInterstitial}
          containerViewStyle={styles.interstitialBanner}
        />
        <Button
          title="Rewardedバナー 動画つき"
          onPress={this.showRewarded}
          containerViewStyle={styles.rewardedBanner}
        />
        <AdMobBanner
          style={styles.bottomBanner}
          bannerSize="smartBannerLandscape"
          adUnitID="ca-app-pub-3940256099942544/6300978111"
          // Test ID, Replace with your-admob-unit-id
          testDeviceID="EMULATOR"
          didFailToReceiveAdWithError={this.bannerError}
        />
        {/* DFP バナーを表示。 DEPとは条件を詳細にカスタマイズできるバナー */}
        <PublisherBanner
          style={styles.PublisherBanner}
          bannerSize="smartBannerPortrait"
          adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
          testDeviceID="EMULATOR"
          onDidFailToReceiveAdWithError={this.bannerError}
          onAdMobDispatchAppEvent={this.adMobEvent}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  rewardedBanner: {
    width: "100%",
    marginLeft: 0
  },
  interstitialBanner: {
    width: "100%",
    marginLeft: 0
  },
  bottomBanner: {
    position: "absolute",
    bottom: 0
  },
  PublisherBanner: {
    position: "absolute",
    bottom: 80
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
})

ちゃんとadmobが表示されている。
素晴らしい。