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

Posted 2023-03-15

【中文标题】响应高度/宽度样式的 React Native 自定义 iOS 视图

【英文标题】：React Native custom iOS view that responds to height/width style

【发布时间】：2016-05-03 22:08:05

【问题描述】：

我正在尝试让我的自定义 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 一样，但我收到一条错误消息，提示“未设置网桥”

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

【讨论】：

我也不得不#import "UIView+React.h"

谢谢！我会在

中添加