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;
}

Answer 2

您可以在文本视图中使用onLayout属性，看看它是否包含您想拥有的更多行。所以你会做以下事情：

使用文本项的初始宽度
等待onLayout触发并根据渲染的尺寸计算文本组件所需的宽度
设置计算出的宽度，使用计算出的宽度

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

2 个答案: