facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎admobのappId追加（以下はadmob公式ios用のappId))
 
(同じ利用者による、間の8版が非表示)
行1: 行1:
 +
[[Javascript/reactnative/admob/react-native-cli/基本]]
  
−
==admobプラグインについて==
+
[[Javascript/reactnative/admob/react-native-cli/react-native-admob]]
−
以下２つある
+
−
*react-native-firebase
+
−
*react-native-admob(https://github.com/sbugert/react-native-admob)
+
−
firebaseの方はfirebaseも含んでいるので、そちらを使ったほうが、後々面倒なことが置きなさそう。
+
  
−
(admob側プラグインを入れた後にfirebaseを追加で入れようとするとごちゃごちゃする可能性がある)
+
[[Javascript/reactnative/admob/react-native-cli/react-native-firebase]]
  
−
==react-native-firebaseインストール==
+
[[Javascript/reactnative/admob/react-native-cli/mediation]]
−
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>
+
−
 
+
−
===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:42時点における最新版

Javascript/reactnative/admob/react-native-cli/基本

Javascript/reactnative/admob/react-native-cli/react-native-admob

Javascript/reactnative/admob/react-native-cli/react-native-firebase

Javascript/reactnative/admob/react-native-cli/mediation

「http://wiki.nonip.net/index.php?title=Javascript/reactnative/admob/react-native-cli&oldid=12065」から取得