如何在Android上測量React Native中的自定義本地組件

Question

我想創建一個呈現單行文本的自定義本機組件。該文本的長度是動態的，字體和大小是可配置的。

當我將自定義組件放置在標準<View />中時，View.onMeasure（native）中提供的大小約束對於高度爲零，並且這是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。