如何在React Native中测量Android上的自定义本地组件

Question

我希望创建一个自定义本地组件，用于呈现单行文字。这段文字的长度是动态变化的，并且字体和大小可配置。

当我将我的自定义组件放置在标准的<View />中时，在View.onMeasure（本地）提供的大小约束中，高度为零且为MeasureSpec.EXACTLY。在View.onMeasure中返回任何非零高度都无效。

class App extends React.Component<{}, undefined> {
  render() {
    return (
      <View style={{
          flex: 1,
        }}>
        <CustomComponent />
      </View>
    )
  }
}

我如何让我的自定义本地视图自我测量并在测量和布局期间将其提供给React Native？

- Nick Marais

---

你尝试过使用“minHeight”吗？ - Rohan Kangale

Answer 1

经过长时间的努力，我找到了答案。

你需要重写 ViewManager.getShadowNodeClass 并提供一个自定义的 ReactShadowNode 实现。

就像这样；

public class CustomShadowNode extends LayoutShadowNode implements YogaMeasureFunction {
    public CustomShadowNode() {
        this.setMeasureFunction(this);
    }

    @Override
    public long measure(
      YogaNode node,
      float width, YogaMeasureMode widthMode,
      float height, YogaMeasureMode heightMode) {
      return YogaMeasureOutput.make(0, 0);
    }
}

我使用LayoutShadowNode，因为它似乎可以处理标准的布局和样式属性。

我在这里详细介绍了这个问题。

- Nick Marais

---

我正在尝试这个，但我甚至没有找到我的阴影节点的构造函数被调用，更别说测量函数了。 - Gabe Sechan

非常感谢您为此提供了帮助。 我目前处于这样一种情况：我正在尝试测量一个扩展了ReactRootView的Android本机UI组件，但是无论是onLayout还是onMeasure似乎都没有运行，因此该组件仍然不可见。您有什么想法可以帮助我测量它吗？谢谢。 - SudoPlz

我还没有尝试过使用这种方法扩展ReactRootView。也许有一些逻辑使得这个视图的工作方式不同。我建议您将您的问题作为一个新问题提出，并链接到这个问题以提供一些背景信息。 - Nick Marais