React Native的原生动态大小的UI组件

Question

我想构建iOS反应原生组件 - 文本的模拟,其中宽度和高度未知,但根据其内容动态计算.正如我在调试中看到的那样,RCTText.drawRect方法已经使用计算的rect调用,但如果我没有通过样式定义大小,则使用空rect调用我的组件.

如何为自定义View定义所需的rect？

Answer 1

答案就在“影子”视图概念中。它看起来没有记录，但 React Native 在实际渲染之前使用“阴影”视图来计算布局。因此，RCTShadowText 类用于标签布局及其 RCTMeasure 函数：

static css_dim_t RCTMeasure(void *context, float width)
{
  RCTShadowText *shadowText = (__bridge RCTShadowText *)context;
  NSTextStorage *textStorage = [shadowText buildTextStorageForWidth:width];
  NSLayoutManager *layoutManager = textStorage.layoutManagers.firstObject;
  NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
  CGSize computedSize = [layoutManager usedRectForTextContainer:textContainer].size;

  css_dim_t result;
  result.dimensions[CSS_WIDTH] = RCTCeilPixelValue(computedSize.width);
  if (shadowText->_effectiveLetterSpacing < 0) {
    result.dimensions[CSS_WIDTH] -= shadowText->_effectiveLetterSpacing;
  }
  result.dimensions[CSS_HEIGHT] = RCTCeilPixelValue(computedSize.height);
  return result;
}