React Native中的原生iOS視圖

Question

我正在使用react-native為google 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

我的問題是如何創建我的bannerView，其大小與我從JavaScript獲得的adHeight和adWidth一樣？ 我認為這只是Objective-C Code的一點變化，但我只是不知道，也沒有找到辦法做到這一點。

Answer 1

所以我做了一點點不同。

這是我的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

在這里我的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;

也許有人會對此有所了解，甚至有更好的解決方案。 如果您有更好的解決方案，如果您與我分享，我並不會感到不快