React Native：onLayout中measure返回的pageX以元素顶部还是中心为基准？

问题描述 #

在React Native中，通过onLayout回调调用measure方法获取元素相对屏幕的位置时，需要确认返回的pageX参数是以元素的边界框左上角为基准，还是以元素中心为基准？

示例代码 #

<View
  onLayout={(event) => {
    event.target.measure((x, y, width, height, pageX, pageY) => {
      console.log(pageX) // Eg. 320
      console.log(pageY) // Eg. 100
    })
  }}>
  <Text>lorem ipsum</Text>
</View>

假设获取到某圆形元素的pageX值为320，请问该值对应的是元素边界框左上角的位置，还是元素中心的位置？

回答 #

measure方法返回的pageX和pageY对应的是元素边界框左上角顶点相对于屏幕左上角的坐标，并非元素中心位置。

以你提到的圆形元素为例，pageX=320指的是这个圆形元素所在容器边界框的左上角在屏幕X轴上的位置，而不是圆心的X坐标。

如果需要获取元素的中心坐标，可以通过以下公式计算：

• 中心X坐标：pageX + width / 2
• 中心Y坐标：pageY + height / 2

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