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

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 中的自定义原生组件

How do I measure a custom native component in React Native on Android

android

measure

react-native