facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(AppId設定)
(Androidでの追加設定)
行47: 行47:
 
</pre>
 
</pre>
 
android/app/build.gradle
 
android/app/build.gradle
  apply plugin: 'com.google.gms.google-services'  
+
  apply plugin: 'com.google.gms.google-services'
 +
 
 +
==iOSの追加設定
 +
#GoogleService-Info.plistをxcodeプロジェクトの直下に置く
 +
 
 +
ios/AdMobSample/AppDelegate.m
 +
<pre>
 +
#import <Firebase.h>
 +
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 +
  if ([FIRApp defaultApp] == nil) {
 +
    [FIRApp configure];
 +
  }
 +
}
 +
</pre>
 +
 
 +
App.js
 +
<pre>
 +
import {
 +
  AdEventType,
 +
  BannerAd,
 +
  BannerAdSize,
 +
  InterstitialAd,
 +
  RewardedAd,
 +
  RewardedAdEventType,
 +
} from '@react-native-firebase/admob';
 +
</pre>
  
 
===参考===
 
===参考===

2020年10月1日 (木) 18:00時点における版

react-native-firebaseインストール

yarn add @react-native-firebase/app
yarn add @react-native-firebase/admob

インストール確認

package.jsonにreact-native-firebaseとadmobが入ってるか確認。

 "dependencies": {
   "@react-native-firebase/admob": "^7.5.1",
   "@react-native-firebase/app": "^8.4.5",
   "react": "16.13.1",
   "react-native": "0.63.2"
 },

AppId設定

firebase.json

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "admob_ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }
}

上記はadmobが公開してるサンプルAppId

Androidでの追加設定

  1. google-services.jsonをandroid/appの下に置く

andorid/build.gradle

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        classpath 'com.google.gms:google-services:4.2.0' # add
    }
}

android/app/build.gradle

apply plugin: 'com.google.gms.google-services'

==iOSの追加設定

  1. GoogleService-Info.plistをxcodeプロジェクトの直下に置く

ios/AdMobSample/AppDelegate.m

#import <Firebase.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
}

App.js

import {
  AdEventType,
  BannerAd,
  BannerAdSize,
  InterstitialAd,
  RewardedAd,
  RewardedAdEventType,
} from '@react-native-firebase/admob';

参考

https://medium.com/javascript-in-plain-english/implement-admob-in-react-native-with-firebase-4e5000419109

https://dev-yakuza.github.io/react-native/react-native-firebase-admob/