|
|
| 行1: |
行1: |
| − | | + | [[Javascript/reactnative/admob/react-native/cli/基本]] |
| − | ==admobプラグインについて==
| + | |
| − | 以下２つある
| + | |
| − | *react-native-firebase
| + | |
| − | *react-native-admob(https://github.com/sbugert/react-native-admob)
| + | |
| − | firebaseの方はfirebaseも含んでいるので、そちらを使ったほうが、後々面倒なことが置きなさそう。
| + | |
| − | | + | |
| − | (admob側プラグインを入れた後にfirebaseを追加で入れようとするとごちゃごちゃする可能性がある)
| + | |
| − | | + | |
| − | ==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
| + | |
