ios - 响应高度/宽度样式的 React Native 自定义 iOS View

Question

我正在尝试让我的自定义 UIView 响应宽度和高度样式，例如

<MyCustomView style={{width: 200, height: 300}}/>

我密切关注 https://github.com/brentvatne/react-native-dashed-border-example 中的简单示例

目前我的 View 和 ViewManager 看起来像:

#import "MyCustomView.h"
#import "RCTViewManager.h"

@implementation MyCustomView

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
      // Create the component view
  }
  return self;
}

@end

和 View 管理器:

@implementation MyCustomViewManager

RCT_EXPORT_MODULE();

- (UIView *)view
{
  return [[MyCustomView alloc] initWithFrame: [[UIScreen mainScreen] bounds]];
}

@end

然而，这当然总是填满屏幕。我希望能够在此组件上设置高度，理想情况下使用通过 style 传递它的 RN 方法。

如果我按照简单的边框示例，我最终会得到

@implementation MyCustomView

- (instancetype)init
{
  self = [super init];
  if (self) {
      // Create the component view
  }
  return self;
}

@end

和

@implementation MyCustomViewManager

RCT_EXPORT_MODULE();

- (UIView *)view
{
  return [[MyCustomView alloc] init];
}

@end

但是 View 不显示，并且报告 self.bounds.size.height 为 0.00。

为了让这个工作正常，我是否遗漏了什么？我需要使用 RCTBridge 吗？我以前确实有这条线

@synthesize bridge = _bridge;

如 https://github.com/brentvatne/react-native-dashed-border-example/blob/master/BVDashedBorderViewManager.m#L9但我收到一条错误消息“Bridge not set”

Answer 1

您可以在您的 View 中覆盖 reactSetFrame，并且只要 React Native 布局更新它，您就可以访问该框架:

- (void)reactSetFrame:(CGRect)frame
{
    CGFloat height = frame.size.height;
    // Do something with the height here
    [super reactSetFrame: frame];
}

如果您还没有为 UIView 导入 React 类别，则需要导入该文件:

#import "UIView+React.h"