React Native：如何获取横向FlatList中点击元素的位置信息

当然可以获取，你遇到的onLayout返回x值一致的问题，是因为onLayout给出的坐标是元素相对于直接父容器的位置——横向FlatList的每个子元素都被包裹在独立的item容器里，所以每个item在自己的容器内x坐标都是0，自然返回值相同。

下面给你两种靠谱的实现方式：

方法一：用Touchable组件 + measure/measureInWindow #

通过给每个item添加ref，在点击时调用元素的measure或measureInWindow方法，直接获取精准坐标：

函数组件示例 #

import React, { useRef } from 'react';
import { FlatList, TouchableOpacity, Text, View } from 'react-native';

const HorizontalList = () => {
  // 存储每个item的ref，用item的唯一ID作为键
  const itemRefs = useRef({});

  const data = [
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
  ];

  const handleItemPress = (itemId) => {
    const itemRef = itemRefs.current[itemId];
    if (!itemRef) return;

    // 获取相对于屏幕的坐标（x/y以屏幕左上角为原点）
    itemRef.measureInWindow((x, y, width, height) => {
      console.log('屏幕坐标：', { x, y, width, height });
    });

    // 如果需要相对于FlatList父容器的坐标，用measure方法
    itemRef.measure((x, y, width, height, pageX, pageY) => {
      console.log('相对父容器坐标：', { x, y, width, height });
      console.log('屏幕坐标（pageX/Y）：', { pageX, pageY });
    });
  };

  const renderItem = ({ item }) => (
    <TouchableOpacity
      ref={ref => itemRefs.current[item.id] = ref}
      onPress={() => handleItemPress(item.id)}
      style={{ padding: 20, marginRight: 10, backgroundColor: '#eee' }}
    >
      <Text>{item.text}</Text>
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      horizontal
      showsHorizontalScrollIndicator={false}
      style={{ marginTop: 50 }}
    />
  );
};

export default HorizontalList;

方法二：结合FlatList的滚动偏移计算（适合不需要绝对精准的场景） #

如果只是需要知道item在列表中的相对位置，可以通过FlatList的onScroll记录滚动偏移量，再结合item的宽度（可通过onLayout获取每个item的宽高）来计算：

// 先在renderItem的元素上用onLayout记录每个item的宽高
<View
  onLayout={(e) => {
    const { width, height } = e.nativeEvent.layout;
    // 把宽高存在state或ref里，比如itemSizes.current[item.id] = { width, height }
  }}
>
  {/* 内容 */}
</View>

// 然后在FlatList上监听滚动
<FlatList
  onScroll={(e) => {
    const scrollOffsetX = e.nativeEvent.contentOffset.x;
    // 存到ref里，比如scrollOffset.current = scrollOffsetX;
  }}
  scrollEventThrottle={16} // 保证滚动时实时更新
/>

// 点击时计算位置：item的起始x = scrollOffsetX + (item索引 * (item宽度 + 间距))

不过这种方法受item间距、滚动精度影响，不如measure方法精准，优先推荐第一种。

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