Native ios View in React Native

Question

Я создаю собственное представление для google DFP в native-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 с размером adHeight и adWidth, который я получаю от JavaScript? Я думаю, что это просто небольшое изменение в коде Objective-C, но я просто не знаю и не нашел способ сделать это. Было бы очень приятно если кто-нибудь может мне помочь. Спасибо

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; 

может быть, кто-то получить представление об этом, или даже есть лучшее решение. Если у вас есть лучшее решение, я не недовольна, если вы поделитесь им со мной