响应高度/宽度样式的 React Native 自定义 iOS 视图

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

和 ViewManager：

@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

但视图不显示，并报告self.bounds.size.height 为 0.00。

有什么我错过了让它工作的东西吗？我需要使用 RCTBridge 吗？我之前确实有这条线

@synthesize bridge = _bridge;

与https://github.com/brentvatne/react-native-dashed-border-example/blob/master/BVDashedBorderViewManager.m#L9 一样，但我收到一条错误消息，提示“未设置网桥”

Answer 1

你可以在你的视图中覆盖 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"