Question

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

当我将自定义组件放入标准<View />时，View.onMeasure（原生）中提供的大小限制为高度为零，这是MeasureSpec.EXACTLY。在View.onMeasure中返回任何非零高度都不会做任何事情。

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

如何允许我的自定义原生视图测量自身并在测量和布局期间将其提供给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来处理标准布局和样式道具。

我在这个问题上写了更多细节here。

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

1 个答案: