React Native中的本机iOS视图

我正在为react native中的GoogleDFP构建一个本机视图。我真的离成功很近了，但少了一点东西

DFPAdViewManager.m：

#import "DFPAdView.h"
#import <UIKit/UIKit.h>
#import "DFPAdViewManager.h"

@implementation DFPAdViewManager

RCT_EXPORT_MODULE();

RCT_EXPORT_VIEW_PROPERTY(adUnitId, NSString)
RCT_EXPORT_VIEW_PROPERTY(adHeight, int)
RCT_EXPORT_VIEW_PROPERTY(adWidth, int)


- (UIView *)view
{
  DFPAdView * theView;
  theView = [[DFPAdView alloc] init];
  return theView;
}

@end

#import "RCTViewManager.h"
#import "GADBannerViewDelegate.h"

@interface DFPViewManager : RCTViewManager <GADBannerViewDelegate>

- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;

@end

@import GoogleMobileAds;
@implementation DFPViewManager {
  DFPBannerView *bannerView;
}

RCT_EXPORT_MODULE()

- (UIView *)view
{

  UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;

  bannerView = [[DFPBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  bannerView.delegate = self;
  bannerView.rootViewController = rootViewController;
  bannerView.alpha = 1;

  [bannerView loadRequest:[DFPRequest request]];
  return bannerView;

}

RCT_EXPORT_VIEW_PROPERTY(adUnitID, NSString)


- (void)adViewDidReceiveAd:(DFPBannerView *)adView {
  [self.bridge.eventDispatcher sendAppEventWithName:@"onSuccess"
                                               body:@{@"name": @"onStop"}];
  [UIView animateWithDuration:1.0 animations:^{
    adView.alpha = 1;
  }];
}

@end

---

我的问题是，如何使用从JavaScript获得的AdHight和adWidth大小创建我的bannerView？我认为这只是Objective-C代码中的一点变化，但我只是不知道，也没有找到一种方法来做到这一点。

所以我做了一些不同

这是我的DFPBannerViewManager.m：

#import "DFPAdView.h"
#import <UIKit/UIKit.h>
#import "DFPAdViewManager.h"

@implementation DFPAdViewManager

RCT_EXPORT_MODULE();

RCT_EXPORT_VIEW_PROPERTY(adUnitId, NSString)
RCT_EXPORT_VIEW_PROPERTY(adHeight, int)
RCT_EXPORT_VIEW_PROPERTY(adWidth, int)


- (UIView *)view
{
  DFPAdView * theView;
  theView = [[DFPAdView alloc] init];
  return theView;
}

@end

#import "RCTViewManager.h"
#import "GADBannerViewDelegate.h"

@interface DFPViewManager : RCTViewManager <GADBannerViewDelegate>

- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;

@end

@import GoogleMobileAds;
@implementation DFPViewManager {
  DFPBannerView *bannerView;
}

RCT_EXPORT_MODULE()

- (UIView *)view
{

  UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;

  bannerView = [[DFPBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  bannerView.delegate = self;
  bannerView.rootViewController = rootViewController;
  bannerView.alpha = 1;

  [bannerView loadRequest:[DFPRequest request]];
  return bannerView;

}

RCT_EXPORT_VIEW_PROPERTY(adUnitID, NSString)


- (void)adViewDidReceiveAd:(DFPBannerView *)adView {
  [self.bridge.eventDispatcher sendAppEventWithName:@"onSuccess"
                                               body:@{@"name": @"onStop"}];
  [UIView animateWithDuration:1.0 animations:^{
    adView.alpha = 1;
  }];
}

@end

#导入“RCTViewManager.h”
#导入“gadbanerviewdelegate.h”
@接口DFPViewManager:RCTViewManager
-（instancetype）initWithEventDispatcher:（RCTEventDispatcher*）eventDispatcher n_指定的初始值设定项；
@结束
@进口谷歌手机；
@DFPViewManager的实现{
DFPBannerView*bannerView；
}
RCT_导出_模块（）
-（UIView*）视图
{
UIViewController*rootViewController=[UIApplication sharedApplication].delegate.window.rootViewController；
bannerView=[[DFPBannerView alloc]initWithAdSize:kGADAdSizeBanner]；
bannerView.delegate=self；
bannerView.rootViewController=rootViewController；
bannerView.alpha=1；
[bannerView加载请求：[DFPRequest请求]]；
返回横幅视图；
}
RCT\u导出\u视图\u属性（adUnitID，NSString）
-（无效）AdviewIDReceiveAD:（DFPBannerView*）adView{
[self.bridge.eventDispatcher sendAppEventWithName:@“onSuccess”
正文：@{@“名称”：@“顶部”}]；
[UIView animateWithDuration:1.0动画：^{
adView.alpha=1；
}];
}
@结束

下面是我的AdView.ios.js：

'use strict';

import React from 'react';

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

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

class AdView extends React.Component {

    constructor() {
        super();

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

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

        NativeAppEventEmitter.addListener('onSuccess', (event) => {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
            this.setState({
                adHeight: adSize[1] + 60,
                adWidth: window.width
            });
        });
    }

    render() {



        if(this.props.row.params) {

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

            let ad = (
                <View style={{justifyContent: 'center', alignItems: 'center', height: this.state.adHeight, width: this.state.adWidth}}>
                    <View style={{marginLeft: adSize[0]-30, marginTop: 30}}>
                        <Text style={{color: 'lightgray', fontSize: 10}}>Anzeige</Text>
                    </View>
                    <DFPAdView 
                        style={{width: adSize[0], height: adSize[1], marginLeft: 30, marginRight: 30, marginBottom: 30}}
                        adUnitID={this.props.row.params.name} />
                </View>
            );

            return ad

        } else {
            return <View />;
        }

    }

}

AdView.propTypes = {

    /**
     * This property contains the adUnitID. This ID could be found in the
     * google DFP console and it's formatted like this: "/123456/bannerexample".
     * It's required to display an ad
     * @type {string}
     */
    adUnitID: React.PropTypes.string,

    /**
     * This property contains the adSize. The first param is the width, the second the height.
     * It's required to display the correct adSize
     * @type {JSON Object}
     */
    adSize: React.PropTypes.array

};



var DFPAdView = requireNativeComponent('DFPView', AdView);

module.exports = AdView;

“严格使用”；
从“React”导入React；
进口{
看法
要求活动组件，
民族主义者，
尺寸，
布局动画，
正文
}从“反应本机”；
let window=Dimensions.get（'window'）；
类AdView扩展了React.Component{
构造函数（）{
超级（）；
此.state={
八比零,，
广告宽度：0
};
}
组件willmount（）{
让adSize=JSON.parse（this.props.row.params.format）；
nativeAppEventmitter.addListener（'onSuccess'，（事件）=>{
LayoutImation.configureNext（LayoutImation.Presets.easeInEaseOut）；
这是我的国家({
adHeight:adSize[1]+60，
adWidth:window.width
});
});
}
render（）{
if（this.props.row.params）{
让adSize=JSON.parse（this.props.row.params.format）；
设ad=(
显示
);
返回广告
}否则{
返回；
}
}
}
AdView.propTypes={
/**
*此属性包含adUnitID。可以在中找到此ID
*谷歌DFP控制台，格式如下：“/123456/bannerexample”。
*需要显示一个广告
*@type{string}
*/
adUnitID:React.PropTypes.string，
/**
*此属性包含adSize。第一个参数是宽度，第二个参数是高度。
*需要显示正确的adSize
*@type{JSON Object}
*/
adSize:React.PropTypes.array
};
var DFPAdView=requirenActiveComponent（'DFPView'，AdView）；
module.exports=AdView；

---

也许有人对此有所了解，甚至有更好的解决方案。如果你有更好的解决方案，如果你和我分享，我不会不高兴！你对这门学科有进一步的了解吗？想分享结果吗？是的，我提出了一个解决方案。这与上面的有点不同，但效果很好。我将用一个答案来描述它；-）请帮帮我！显示所有代码，因为我需要在我的应用程序中显示DFP广告谢谢。我将在未来几周内调查此事。我会回来报到的。谢谢分享。可以在最终的源代码中查看吗？因为我看到很多反对意见你在哪里看到反对意见？我正在使用上面的代码，它工作得很好