2016-01-12 33 views
3

我正在爲react-native中的Google DFP構建原生視圖。我真的很接近我的成功,但一個小東西丟失:(原生ios在React Native中查看

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代碼中的一點變化,但我只是不知道,也沒有找到辦法做到這一點。如果有人能幫助我。謝謝

+0

嘿!這個問題你有沒有進一步的瞭解?想分享結果嗎? – ptomasroos

+0

是的,我做了一個解決方案。它與上面有點不同,但它工作正常。我會用一個答案來形容它;-) – vanBrunneren

+0

請幫助我!向我展示所有代碼,因爲我需要在我的應用中顯示DFP廣告管理系統 – stereodenis

回答

2

所以我做了一些改變。

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

也許有人得到這一點的想法,甚至有一個更好的解決方案。如果你有更好的解決方案,我不會不高興,如果你與我分享

+0

謝謝。我將在未來幾周內對此進行調查。將回報。感謝分享 – ptomasroos

+0

是否可以在最終源代碼中查看?因爲我看到很多棄用 – stereodenis

+0

你在哪裏看到棄用?我使用上面的代碼,它工作正常 – vanBrunneren