Question

在为Android实现react-native UI模块后，我只能在屏幕上看到没有视图的空白区域。

我的onAdLoaded监听器确实被解雇了。但是它只显示白屏并且在我的屏幕上不可见。

这是我的代码的一些片段。

public class ReactAdMobManager extends SimpleViewManager<AdView> {

    private AdView mAdView;

    @ReactProp(name = "src")
    public void setSrc(AdView view, String src) {
        Log.d("ReactAdMobManager", "inside set src");
    }

    public static final String REACT_CLASS = "RCTAdMobView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }


    @Override
    public AdView createViewInstance(ThemedReactContext context) {
        Log.d("ReactAdMobManager", "inside create view instance");
        mAdView = new AdView(context);
        mAdView.setAdSize(AdSize.FULL_BANNER);
        mAdView.setAdUnitId("xxxxx");

        mAdView.setAdListener(new AdListener() {
            @Override
            public void onAdLoaded() {
                Log.d("ReactAdMobManager", "ad loaded");
            }
        });

        // Create an ad request.
        AdRequest adRequest = new AdRequest.Builder().addTestDevice("50AC32B853DA4B3E64C3B10BC26D0380").build();
        //adRequest.
        mAdView.loadAd(adRequest);

        return mAdView;

    }

}

我的反应代码AndroidAdmobView.js

var React = require('react-native');
var { requireNativeComponent } = React;


var AdmobView = React.createClass ({

  render() {
      return <RCTAdmob style={{flex:1, height:50}}/>; 
  }
})

AdmobView.propTypes = {
  src: React.PropTypes.string
};

var RCTAdmob = requireNativeComponent('RCTAdMobView', AdmobView);

module.exports = AdmobView;

用法

var AdView = require('./AndroidAdmobView')
<AdView style={{height:50}} src="foo" />

Answer 1

嗨，我知道它有点旧，可能与我没有相同，但这可以帮助你。

我试图在Android上的RN组件中实施Google DFP插件。我几乎尝试了一切，但它没有工作。最后，我发现广告只在我设置视图的高度时出现。当视图设置为广告的确切宽度和高度时，我的插件就像一个魅力。现在的问题是我不想设置硬编码的高度和宽度，因为有时会有请求，但不会显示广告。也许您没有网络连接，或者您的所有频道都没有横幅广告。所以我想出了将AdView的大小设置为0的想法，在本机java方面，我将一个监听器附加到onAdLoaded方法。在JS方面，你还需要一个在加载广告时调用的监听器，在这个JS监听器中你可以将插件的高度设置为所需的大小。

我知道它并不是最好的解决方案，但在我的情况下它是有效的，只要没有人有其他解决方案并与我分享解决方案，我很高兴我的方式工作。在我的插件代码下面：

NativeAdView.java

package com.YOURPACKAGE.ch.CustomModules;

import android.graphics.Color;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.events.RCTEventEmitter;
import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.doubleclick.PublisherAdRequest;
import com.google.android.gms.ads.doubleclick.PublisherAdView;

    public class NativeAdView extends SimpleViewManager<View> {

    public static final String REACT_CLASS = "NativeAdView";

    private PublisherAdView adView;
    private ThemedReactContext mContext = null;

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    public View createViewInstance(final ThemedReactContext context) {

        mContext = context;
        adView = new PublisherAdView(context);

        adView.setAdListener(new AdListener() {
            public void onAdLoaded() {
                WritableMap eventData = Arguments.createMap();
                ReactContext reactContext = (ReactContext) context;
                reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                        .emit("YouCustomEventName", eventData);
            }
        });

        return adView;

    }

    @ReactProp(name = "adUnitId")
    public void setAdUnitId(View view, @Nullable String adUnitId) {

        PublisherAdRequest adRequest = new PublisherAdRequest.Builder().build();
        AdSize customAdSize = new AdSize(300, 250);
        adView.setAdUnitId(adUnitId);
        adView.setAdSizes(customAdSize);

        adView.loadAd(adRequest);

    }



    public void onAdFailedToLoad(int errorCode) {

    }
}

AdView.android.js

'use strict';

import React, { PropTypes } from 'react';

import {
    requireNativeComponent,
    View,
    Text,
    DeviceEventEmitter,
    Dimensions,
    LayoutAnimation
} from 'react-native';

let params = {
    name: 'NativeAdView',
    propTypes: {
        ...View.propTypes,
        ...Text.propTypes,
        adUnitId: PropTypes.string
    },
};

let NativeAdView = requireNativeComponent('NativeAdView', params);

let window = Dimensions.get('window');

class AdView extends React.Component {

    constructor() {
        super();

        this.state = {
            adHeight: 0,
            adWidth: 0
        };
    }

    componentWillMount() {
        let self = this;
        this._adListener = DeviceEventEmitter.addListener('YouCustomEventName', function(e) {
            console.log(e);
            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
            let adSize = JSON.parse(self.props.row.params.format);
            self.setState({
                adHeight: adSize[1],
                adWidth: adSize[0]
            });         
        });
    }

    componentWillUnmount() {
        this._adListener.remove();
    }

    render() {

        if(this.props.row.params) {

            let adSize = JSON.parse(this.props.row.params.format);

            let margin;
            let height;
            let width;
            let adWidth;
            let adHeight;
            let adText;
            if(this.state.adWidth > 0 && this.state.adHeight > 0) {
                margin = 30;
                height = this.state.adHeight + 60;
                width = window.width;
                adHeight = this.state.adHeight;
                adWidth = this.state.adWidth;
                adText = (
                    <View style={{marginLeft: adWidth-45}}>
                        <Text style={{color: 'lightgray', fontSize: 10}}>Anzeige</Text>
                    </View>
                );
            } else {
                margin = 0;
                height = 0;
                width = 0;
                adHeight = 0;
                adWidth = 0;
            }

            return(
                <View style={{justifyContent: 'center', alignItems: 'center', height: height, width: width, marginTop: margin}}>
                    {adText}
                    <NativeAdView 
                        style={{height: adHeight, width: adWidth, marginLeft: margin, marginRight: margin, marginBottom: margin}}
                        adUnitId={this.props.row.params.name} />
                </View>
            );
        } else {
            return <View />;            
        }
    }
}

module.exports = AdView;

也许某人有另一个更好的解决方案。对于那些在我尝试这种情况时绝望的人来说，这应该是一种帮助：）

React-Native自定义Android UI模块：实现admob视图

1 个答案: