React-Native自定义Android用户界面模块：实现admob视图

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; 

也许有人还有一个，这个更好的解决方案。这应该是一个像我一样绝望的人的帮助:)当我尝试这个时候:)