React Native中如何获取Map列表项在ScrollView中的正确位置？

问题描述 #

在React Native开发中，我需要获取Map渲染的列表项的位置。尝试了以下代码：

newRef?.current?.measure( (fx, fy, width, height, px, py) => {
setY(fy)
})

能获取列表项Y坐标，但列表项超出首屏后，measure的起始位置会重置，想知道怎么在整个ScrollView里持续正确获取位置。

解决方法 #

1. 替换measure为measureInWindow #

measure返回的是相对于父组件的坐标，一旦列表项滚出首屏，父组件的视口参考就会变化，导致坐标重置。measureInWindow返回的是相对于屏幕的坐标，结合ScrollView的滚动偏移就能算出绝对位置：

import { useRef, useState } from 'react';
import { ScrollView, View } from 'react-native';

const YourListComponent = () => {
  const scrollRef = useRef(null);
  const [scrollYOffset, setScrollYOffset] = useState(0);
  // 存储所有列表项的ref
  const itemRefs = useRef({});

  // 实时记录ScrollView的滚动偏移
  const handleScroll = (e) => {
    setScrollYOffset(e.nativeEvent.contentOffset.y);
  };

  // 计算列表项在ScrollView内的绝对位置
  const calculateItemPos = (itemId) => {
    const itemRef = itemRefs.current[itemId];
    if (!itemRef) return;

    itemRef.measureInWindow((screenX, screenY, _, __) => {
      // 先获取ScrollView自身在屏幕上的Y坐标
      scrollRef.current.measureInWindow((_, scrollScreenY) => {
        // 绝对Y坐标 = 列表项屏幕Y - ScrollView屏幕Y + 滚动偏移量
        const absoluteItemY = screenY - scrollScreenY + scrollYOffset;
        // 这里可以把absoluteItemY存到状态或者用在需要的地方
        console.log(`列表项${itemId}的绝对Y坐标：`, absoluteItemY);
      });
    });
  };

  return (
    <ScrollView
      ref={scrollRef}
      onScroll={handleScroll}
      scrollEventThrottle={16} // 保证滚动时实时更新
    >
      {yourDataList.map(item => (
        <View
          key={item.id}
          ref={el => itemRefs.current[item.id] = el}
          onLayout={() => calculateItemPos(item.id)} // 布局完成时计算位置
        >
          {/* 你的列表项内容 */}
        </View>
      ))}
    </ScrollView>
  );
};

2. 结合onScroll和onLayout实时更新 #

• 给ScrollView加onScroll监听，实时获取滚动偏移量，scrollEventThrottle设为16保证每秒60次更新，精度足够
• 每个列表项绑定onLayout事件，每次布局变化（包括滚动导致的位置变化）都重新计算位置
• 用measureInWindow拿到屏幕坐标后，减去ScrollView自身的屏幕Y坐标，再加上滚动偏移，就是列表项在整个ScrollView内容里的绝对位置

3. 原生模块兜底（UIManager） #

如果上述方法精度不够，直接用原生UIManager的测量方法：

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

const measureItemWithUIManager = (itemRef) => {
  const nodeId = findNodeHandle(itemRef);
  if (!nodeId) return;

  UIManager.measure(nodeId, (_, __, ___, ____, screenX, screenY) => {
    scrollRef.current.measureInWindow((_, scrollScreenY) => {
      const absoluteY = screenY - scrollScreenY + scrollYOffset;
      // 处理坐标
    });
  });
};

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