android - 如何在 Android 上的 React Native 中测量自定义 native 组件

Question

我想创建一个呈现单行文本的自定义原生组件。此文本的长度是动态的，字体和大小是可配置的。

当我将自定义组件放入标准 <View /> 中时View.onMeasure 中提供的大小限制(native) 的高度为零，这是 MeasureSpec.EXACTLY .返回 View.onMeasure 中的任何非零高度什么都不做。

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

如何让我的自定义原生 View 进行 self 测量，并在测量和布局期间将其提供给 React Native？

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，因为它似乎可以处理标准布局和样式 Prop 。

我写了更多关于此事的细节here .