如何通知 React Native 自定义视图的大小发生了变化？

Question

我正在为 React Native 编写自定义视图 iOS。

基本上我必须让文本尽可能大（基于当前视图的视图）。我通过覆盖 reactSetFrame 并更改框架来完成它。唯一的问题是视图的位置不对，截图如下：

似乎react native的"layout manager"认为视图的高度是0。

这里是代码：

- (void)reactSetFrame:(CGRect)frame {
  [super reactSetFrame:frame];

  NSLog(@"react set frame %@", NSStringFromCGRect(frame));

  [self fitText:self.text];
}

- (void)fitText:(NSString *)text {
    // ... get the correct font size and expected size    
    [self setFont:font];

    CGRect newFrame = self.frame;

    newFrame.size.height = expectedLabelSize.height;

    NSLog(@"new frame is %@", NSStringFromCGRect(newFrame));

    self.frame = newFrame;
}

基本上，当框架发生变化时，我会根据传递的文本使用正确的尺寸更新框架。

日志输出是这样的：

2017-06-25 16:43:16.434 ABC[44836:6551225] react set frame {{0, 0}, {375, 0}}
2017-06-25 16:43:16.435 ABC[44836:6551225] new frame is {{0, 0}, {375, 69.197000000000017}}
2017-06-25 16:43:16.435 ABC[44836:6551225] react set frame {{0, 0}, {375, 0}}
2017-06-25 16:43:16.436 ABC[44836:6551225] new frame is {{0, 0}, {375, 85.996999999999986}}

我试过用新框架再次调用 reactSetFrame 但它不起作用。有没有办法告诉 React Native 视图的大小已经改变？

Answer 1

所以我终于找到了一种方法来做到这一点；基本上反应本机利用阴影视图来获取布局信息。所以我不得不将这段代码添加到我的经理

- (RCTShadowView *)shadowView
{
  return [FitTextShadowView new];
}

这基本上说明了我的组件的阴影视图是什么。

然后我不得不更改 Yoga 用来获得正确高度的测量函数的实现：

@implementation FitTextShadowView

static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode)
{
  FitTextShadowView *shadowText = (__bridge FitTextShadowView *)YGNodeGetContext(node);
  YGSize result;

  result.width = width;
  result.height = [shadowText getHeight:shadowText.text thatFits:width];
  return result;
}

- (instancetype)init
{
  if ((self = [super init])) {
    YGNodeSetMeasureFunc(self.yogaNode, RCTMeasure);
  }
  return self;
}

@end

如何通知 React Native 自定义视图的大小发生了变化？

How to notify React Native that the size of a custom view has changed?

react-native

react-native-ios