React Native 中的原生 iOS 视图

Posted 2023-03-15

【中文标题】React Native 中的原生 iOS 视图

【英文标题】：Native iOS View in React Native

【发布时间】：2016-01-12 11:07:22

【问题描述】：

我正在 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

我的问题是如何创建具有从 javascript 获得的 adHeight 和 adWidth 大小的横幅视图？我认为这只是 Objective-C 代码中的一个小改动，但我只是不知道也没有找到方法来做到这一点。

【问题讨论】：

嘿！你对这个主题有进一步了解吗？想分享结果吗？

是的，我提出了解决方案。它与上面的有点不同，但它工作正常。我会用答案来描述它;-)

请帮帮我！显示所有代码，因为我需要在我的应用中显示 DFP 广告

【参考方案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;

也许有人对此有所了解，甚至有更好的解决方案。如果你有更好的解决方案，如果你分享给我，我不会不高兴

【讨论】：

谢谢。我将在接下来的几周内对其进行调查。会回来汇报的。感谢分享

是否可以查看最终源代码？因为我看到很多弃用

您在哪里看到弃用？我正在使用上面的代码，它工作正常