|
|
| 行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([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',
| |
| − | },
| |
| − | });
| |
| − | </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
| |
| − |
| |
| − | サンプルコード：https://github.com/sbugert/react-native-admob/blob/master/Example/App.js
| |
