facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「 ==admobプラグインについて== 以下2つある *react-native-firebase *react-native-admob(https://github.com/sbugert/react-native-admob) firebaseの方はfireba...」)
 
(内容を「 ==admobプラグインについて== 以下2つある *react-native-firebase *react-native-admob(https://github.com/sbugert/react-native-admob) firebaseの方はfirebas...」で置換)
 
(同じ利用者による、間の6版が非表示)
行6: 行6:
 
firebaseの方はfirebaseも含んでいるので、そちらを使ったほうが、後々面倒なことが置きなさそう。
 
firebaseの方はfirebaseも含んでいるので、そちらを使ったほうが、後々面倒なことが置きなさそう。
  
(admob側プラグインを入れた後にfirebaseを追加で入れようとするとごちゃごちゃする可能性がある)
+
(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();
+
 
+
===参考===
+
GoogleMobileAds追加 https://qiita.com/juginon/items/7f4ee4273b2c480277f3
+

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

admobプラグインについて

以下2つある

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

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