如何在react-pdf中不使用debug属性获取元素宽高

react-pdf的View组件内置了onLayout回调属性，可在元素布局完成后直接获取宽高信息，无需依赖debug属性。

修改后的代码示例： #

<View className="dynamic-height" onLayout={(event) => {
  const { width, height } = event.nativeEvent.layout;
  // 这里可以将宽高存入状态或用于后续逻辑处理
  console.log('当前元素宽高：', width, height);
}}>
    <View style={[membraneStyle.textHeader, { width: getRationVal(pageWidth) }]}>
        <SubLine lineWidth='10px' lineHeight='12' />
        <Text style={{ paddingLeft: 5 }}>Desalination \ Demineralization \ Membrane Separator (MEMS) Unit-Level Flow Summary</Text>
    </View>
    <View style={[membraneStyle.mainTable, { width: getRationVal(tablewidth) }]}>
        {createHeader(herder_val)}
        {createContent(items1, herder_val)}
    </View>
</View>

关键说明： #

• onLayout会在组件完成布局渲染后自动触发，回调参数的event.nativeEvent.layout对象中包含：
  • width：元素实际渲染宽度
  • height：元素实际渲染高度
  • x、y：元素相对于父容器的坐标位置
• 你可以在回调中直接使用这些值，比如动态调整其他组件样式、计算布局间距等场景。

内容的提问来源于stack exchange，提问作者shekhar kumar