React Native：onLayout返回非绝对位置，如何获取元素绝对位置？

问题描述 #

我正在用React Native的PanResponder实现屏幕元素拖拽功能，但发现onLayout事件返回的不是元素的绝对X位置，结果受父视图影响出现异常。比如当前视图分为3列，onLayout所在的中间列返回的X值是146.5，这并不是绝对位置。请问怎么获取嵌套在多层父视图中元素的绝对位置？

相关代码 #

// Omitted some code for clarity

const dropZoneValues = React.useRef(null);

const pan = React.useRef(new Animated.ValueXY());

const setDropZoneValues = React.useCallback((event) =>
{
    dropZoneValues.current = event.nativeEvent.layout;

}, []);



return (
    <Main background={bg} showHeader={false}>


        <Row rowStyles={{
            textAlign: 'center', marginLeft: 50, marginRight: 50,
            alignSelf: 'center',
            alignItems: 'center',
            textAlignVertical: 'center',
            justifyContent: 'center',
        }}>

            <Col xs={4} sm={4} md={4} lg={4}>
            </Col>
            <Col xs={4} sm={4} md={4} lg={4}>

                <View
                    onLayout={setDropZoneValues}
                    style={styles.dropZone}>
                    <Text style={styles.text}>Drop me here!</Text>
                </View>

                {renderDraggable()}

            </Col>

            <Col xs={4} sm={4} md={4} lg={4}>
            </Col>

        </Row>

    </Main>

);

const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        padding: 20,
        flexDirection: 'column',
    },
    dropZone: {
        height: 100,
        backgroundColor: '#2c3e50',
        width: 100,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
    },
    text: {
        marginTop: 25,
        marginLeft: 5,
        marginRight: 5,
        textAlign: 'center',
        color: '#fff'
    },
    draggableContainer: {
        zIndex: 99999
    },
    circle: {
        backgroundColor: '#1abc9c',
        width: 80,
        height: 80,
        borderRadius: CIRCLE_RADIUS,
        zIndex: 99999,
        position: 'absolute'
    }

});

解决方案 #

方法1：使用UIManager.measureInWindow直接获取绝对位置 #

这是最简便的方案，能直接拿到元素相对于屏幕左上角的绝对坐标：

1. 给目标View添加ref：

const dropZoneRef = React.useRef(null);

2. 修改setDropZoneValues函数，调用测量方法：

import { UIManager, findNodeHandle } from 'react-native';

const setDropZoneValues = React.useCallback((event) => {
  if (dropZoneRef.current) {
    UIManager.measureInWindow(
      findNodeHandle(dropZoneRef.current),
      (x, y, width, height) => {
        // x、y为屏幕绝对坐标，width、height为元素尺寸
        dropZoneValues.current = { x, y, width, height };
      }
    );
  }
}, []);

3. 在JSX中绑定ref：

<View
  ref={dropZoneRef}
  onLayout={setDropZoneValues}
  style={styles.dropZone}>
  <Text style={styles.text}>Drop me here!</Text>
</View>

方法2：递归累加父视图偏移（手动计算） #

如果需要兼容特殊场景，可以递归获取所有父视图的布局偏移，累加得到绝对位置：

import { UIManager, findNodeHandle } from 'react-native';

const getAbsolutePosition = async (ref) => {
  if (!ref.current) return null;
  
  let absoluteX = 0;
  let absoluteY = 0;
  let currentNode = ref.current;
  
  while (currentNode) {
    const layout = await new Promise(resolve => {
      UIManager.measure(
        findNodeHandle(currentNode),
        (_, __, ___, ____, pageX, pageY) => {
          resolve({ pageX, pageY });
        }
      );
    });
    absoluteX += layout.pageX;
    absoluteY += layout.pageY;
    // 获取父节点，继续累加偏移
    currentNode = currentNode._nativeTag ? await UIManager.getParent(currentNode._nativeTag) : null;
  }
  
  return { x: absoluteX, y: absoluteY };
};

调用示例：

useEffect(() => {
  const getPos = async () => {
    const pos = await getAbsolutePosition(dropZoneRef);
    if (pos) {
      dropZoneValues.current = pos;
    }
  };
  getPos();
}, []);

关键说明 #

• onLayout返回的layout.x是元素相对于直接父视图的偏移量，而非屏幕绝对位置，这是正常行为。
• measureInWindow返回的坐标不受任何父视图布局影响，直接对应屏幕左上角的位置，完全适配拖拽场景的需求。

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