facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(admobプラグインについて)
(内容を「 ==admobプラグインについて== 以下2つある *react-native-firebase *react-native-admob(https://github.com/sbugert/react-native-admob) firebaseの方はfirebas...」で置換)
 
(同じ利用者による、間の2版が非表示)
行7: 行7:
  
 
(admob側プラグインを入れた後にfirebaseを追加で入れようとすると、2つが競合して、ごちゃごちゃする可能性がある)
 
(admob側プラグインを入れた後にfirebaseを追加で入れようとすると、2つが競合して、ごちゃごちゃする可能性がある)
 
==react-native-firebaseインストール==
 
yarn add react-native-firebase
 
 
===参考===
 
https://dev-yakuza.github.io/react-native/react-native-firebase-admob/
 
 
==react-native-admobインストール==
 
yarn add react-native-admob@next
 
 
===androidでの設定追加===
 
android/build.gradle
 
<pre>
 
allprojects {
 
    repositories {
 
        google()
 
    }
 
}
 
</pre>
 
 
android/app/build.gradle
 
<pre>
 
dependencies {
 
    implementation 'com.google.android.gms:play-services-ads:19.1.0'
 
}
 
</pre>
 
 
android/app/src/main/AndroidManifest.xml (idはAdMob公式のテストappId)
 
<pre>
 
<manifest>
 
    <application>
 
        <meta-data
 
            android:name="com.google.android.gms.ads.APPLICATION_ID"
 
            android:value="ca-app-pub-3940256099942544~3347511713"/>
 
    </application>
 
</manifest>
 
</pre>
 
 
===play-services-adsが見つからないと出る場合===
 
以下のエラーが出るとき
 
<pre>
 
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
 
</pre>
 
以下を入れる
 
 
android/app/build.gradle
 
<pre>
 
dependencies {
 
    implementation 'com.google.android.gms:play-services-ads:19.1.0'
 
}
 
</pre>
 
 
===iosでの追加設定===
 
ios/Podfile
 
<pre>
 
target 'AdMobDemo' do
 
  pod 'Google-Mobile-Ads-SDK'
 
end
 
</pre>
 
 
<pre>
 
$ cd ios
 
$ pod install --repo-update
 
Installing react-native-admob (2.0.0-beta.6)
 
Installing Google-Mobile-Ads-SDK (7.62.0)
 
</pre>
 
 
====admobのappId追加(以下はadmob公式ios用のappId)====
 
 
ios/AdMobDemo/Info.plist
 
<pre>
 
<key>GADApplicationIdentifier</key>
 
<string>ca-app-pub-3940256099942544~1458002511</string>
 
</pre>
 
 
====iosのGoogleMobileAdsが見つからないエラー====
 
以下エラーが出るとき
 
<pre>
 
/node_modules/react-native-admob/ios/RNGADBannerView.h:7:9: fatal error: module 'GoogleMobileAds' not found
 
</pre>
 
ios/Podfile
 
<pre>
 
target 'AdMobDemo' do
 
  pod 'Google-Mobile-Ads-SDK'
 
end
 
</pre>
 
上記を記載して、以下実行してるか確認
 
<pre>
 
$ pod install --repo-update
 
</pre>
 
 
==サンプル==
 
App.js
 
<pre>
 
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([AdMobInterstitial.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',
 
  },
 
});
 
</pre>
 
 
==動作検証==
 
android、iosともに表示された。
 
 
インステは動画じゃなくて静止画のみだった。(2020/7/20時点)
 
 
==async-awaitを使う場合==
 
AdMobRewarded.requestAd().then(() => AdMobRewarded.showAd());
 
上記を以下のようにもかける。functionをasyncで囲む
 
await AdMobRewarded.requestAd();
 
await AdMobRewarded.showAd();
 
 
===バナーサイズ===
 
adSizeに以下の通り設定する
 
<pre>
 
banner 320x50
 
largeBanner 320x100
 
mediumRectangle 300x250
 
fullBanner 468x60
 
leaderboard 728x90
 
smartBannerPortrait Screen width x 32|50|90
 
smartBannerLandscape Screen width x 32|50|90
 
</pre>
 
 
===参考===
 
GoogleMobileAds追加 https://qiita.com/juginon/items/7f4ee4273b2c480277f3
 

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

admobプラグインについて

以下2つある

firebaseの方はfirebaseも含んでいるので、そちらを使ったほうが、後々面倒なことが置きなさそう。

(admob側プラグインを入れた後にfirebaseを追加で入れようとすると、2つが競合して、ごちゃごちゃする可能性がある)