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

Question

我想构建 iOS 反应本机组件 - 文本的模拟，其中宽度和高度未知，但根据其内容动态计算。正如我从调试中看到的那样，RCTText.drawRect 方法已经用计算出的矩形调用，但如果我没有通过样式定义尺寸，我的组件将用空矩形调用。

如何为自定义视图定义所需的矩形？

Answer 1

答案在'shadow'视图概念中。看起来没有记录，但 React Native 使用 'shadow' 视图在实际渲染之前计算布局。所以 RCTShadowText class 用于标记的布局及其 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 组件

Native dynamic-sized UI component for React Native

react-native