React Native新架构Fabric组件：iOS端避免手动设置UIView宽高

问题说明 #

使用React Native新架构开发iOS Fabric模块时，自定义UIView遇到以下问题：

• 仅用[[UIView alloc] init]初始化，不在原生端设置CGRect，JS侧通过style设置宽高后视图不可见。
• 用initWithFrame设置原生宽高，视图会忽略JS侧传递的样式尺寸。
• UIButton、UILabel这类原生控件无需设置CGRect，添加约束后即可通过JS style正常显示。需求是不通过specs传参，仅靠JS侧style控制UIView尺寸。

无效代码示例 #

Objective-C++ #

_view = [[UIView alloc] init];
_gradient = [CAGradientLayer layer];
_gradient.frame = _view.bounds;
_gradient.startPoint = CGPointZero;
_gradient.endPoint = CGPointMake(1, 1);
_gradient.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor blackColor].CGColor,(id)[UIColor blueColor].CGColor];
[_view.layer insertSublayer:_gradient atIndex:0];
self.contentView = _view;

JS #

<YourEdgeLinearGradientView
          style={{height: 200, width: 200, margin: 20}}
/>

有效但不符合需求的代码示例 #

Objective-C++ #

_view = [[UIView alloc] initWithFrame:CGRectMake(0,0,400,400)];
// 渐变层代码同上
self.contentView = _view;

JS #

<YourEdgeLinearGradientView
          style={{height: 200, width: 200, margin: 20}}
/>

解决方案 #

修改后的Objective-C++代码 #

// 初始化视图，不设置frame
_view = [[UIView alloc] init];
// 关闭自动约束转换，让RN布局系统控制尺寸
_view.translatesAutoresizingMaskIntoConstraints = NO;

// 创建渐变层
_gradient = [CAGradientLayer layer];
_gradient.startPoint = CGPointZero;
_gradient.endPoint = CGPointMake(1, 1);
_gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blackColor].CGColor, (id)[UIColor blueColor].CGColor];
[_view.layer insertSublayer:_gradient atIndex:0];

self.contentView = _view;
}

// 重写layoutSubviews，每次视图布局更新时同步渐变层尺寸
- (void)layoutSubviews {
    [super layoutSubviews];
    _gradient.frame = self.contentView.bounds;
}

JS代码（无需修改） #

<YourEdgeLinearGradientView style={{height: 200, width: 200, margin: 20}} />

原理说明 #

1. Auto Layout支持：自定义UIView默认translatesAutoresizingMaskIntoConstraints = YES，会将frame转换为约束，导致RN的布局样式无法生效。设置为NO后，RN可以直接通过布局系统控制视图尺寸。
2. 渐变层尺寸同步：初始时视图bounds为CGRectZero，渐变层frame也会是零。重写layoutSubviews方法，在每次视图布局更新时将渐变层frame设置为视图的bounds，确保渐变层跟随视图尺寸变化。
3. 原生控件差异：UILabel、UIButton等自带intrinsicContentSize，Auto Layout能自动处理其尺寸适配；自定义UIView无默认 intrinsic 尺寸，需手动开启Auto Layout支持才能响应RN的样式设置。

内容的提问来源于stack exchange，提问作者BraveEvidence