在React Native ios视图中

I'm building an native view for google DFP in react-native. I'm really close to my success but a little thing is missing :(

我正在构建一个本机视图，用于在本地生成谷歌DFP。我离成功很近了，但少了一件事

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

DFPAdView.m:

#import "DFPAdView.h"

@import GoogleMobileAds;

@implementation DFPAdView
{
  DFPBannerView *bannerView;
}

- (instancetype)init
{
  self = [super init];
  bannerView = [DFPBannerView alloc];
  return self;
}

- (void)setAdHeight:(int*)adHeight
{
  self.adHeight = adHeight;
}

- (void)setAdWidth:(int*)adWidth
{
  self.adWidth = adWidth;
}

- (void)setAdUnitId:(NSString*)adUnitId
{

  GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(self.adWidth, self.adHeight));
  bannerView = [[DFPBannerView alloc] initWithAdSize:customAdSize];
  [self addSubview:bannerView];

  UIViewController *controller = [[UIViewController alloc] init];
  bannerView.adUnitID = adUnitId;
  bannerView.rootViewController = controller;
  DFPRequest *request = [DFPRequest request];
  [bannerView loadRequest:request];
}

@end

My question is how can I create my bannerView with the size of adHeight and adWidth which I get from JavaScript? I think its just a little change in the Objective-C Code but I just don't know and didn't find a way to do this. It would be really nice if anybody could help me out. Thanks

我的问题是，如何创建带有adHeight和adWidth大小的bannerView ?我认为这只是Objective-C代码的一点改变，但我不知道也没找到方法。如果有人能帮我，那就太好了。谢谢

1 个解决方案

#1

So I made it a little different.

所以我做的有点不同。

Here is my DFPBannerViewManager.m:

这是我DFPBannerViewManager.m:

#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

and here My AdView.ios.js:

这里我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;

maybe someone get an idea of this, or even has a better solution. If you have a better solution, I'm not unhappy if you share it with me

也许有人知道这个，甚至有更好的解决办法。如果你有更好的解决办法，如果你和我分享，我不会不高兴

#1