React Native中Pressable组件onPress获取相对坐标问题求助

问题核心是React Native的locationX/Y是相对于触发事件的最内层元素的，所以点击嵌套View时，拿到的坐标自然是相对于内层View的。要获取相对于外层Pressable的坐标，可以通过以下方法实现：

方法：通过绝对坐标计算相对位置 #

利用触摸点的屏幕绝对坐标，减去Pressable组件自身的屏幕坐标，得到相对于Pressable的位置：

1. 给Pressable添加ref，用于获取组件的布局信息
2. 在onPress事件中，调用measure方法获取Pressable相对于屏幕的坐标
3. 从事件的nativeEvent中拿到触摸点的屏幕绝对坐标，计算差值

示例代码 #

import React, { useRef } from 'react';
import { Pressable, View } from 'react-native';

export default function PressableCoordinateDemo() {
  const pressableRef = useRef(null);

  const handlePress = (event) => {
    pressableRef.current?.measure((_, __, ___, ____, pressablePageX, pressablePageY) => {
      const { pageX: touchPageX, pageY: touchPageY } = event.nativeEvent;
      // 计算相对于Pressable的坐标
      const relativeX = touchPageX - pressablePageX;
      const relativeY = touchPageY - pressablePageY;
      console.log('相对于Pressable的坐标：', relativeX, relativeY);
    });
  };

  return (
    <Pressable
      ref={pressableRef}
      onPress={handlePress}
      style={{
        width: 300,
        height: 300,
        backgroundColor: '#add8e6',
        justifyContent: 'center',
        alignItems: 'center',
        margin: 20,
      }}
    >
      <View
        style={{
          width: 150,
          height: 150,
          backgroundColor: '#ffff00',
        }}
      />
    </Pressable>
  );
}

原理说明 #

• event.nativeEvent.pageX/pageY：触摸点相对于设备屏幕左上角的绝对坐标，不受嵌套元素影响
• measure方法返回的pressablePageX/pressablePageY：Pressable组件左上角相对于屏幕的绝对坐标
• 两者差值就是触摸点相对于Pressable的坐标，无论点击的是外层区域还是内层嵌套View

不推荐的方案 #

如果内层View不需要交互，可以给内层View添加pointerEvents="none"，这样触摸事件会直接触发Pressable的事件，此时locationX/Y就是相对于Pressable的坐标。但这种方法会丢失内层View的触摸交互能力，仅适用于纯展示的嵌套元素。

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