React Native(Expo)如何获取FlatList内元素Y坐标并解决变量访问报错

你在onLayout回调函数内部用var声明的y属于该回调的函数局部变量，作用域仅局限在onLayout函数内部，onPress是完全独立的另一个回调函数，没有权限访问其他函数内部声明的局部变量，因此会抛出找不到变量y的错误。
就算把var换成let/const声明也无法解决问题，本质是变量作用域的限制，和声明关键字无关。

优先选择不触发额外重渲染的存储方式，避免列表卡顿：

• 方案1：函数组件使用useRef存储布局值（推荐，性能最优）
  Ref的更新不会触发组件重渲染，非常适合存储这类布局计算类的临时值，以列表项的唯一id作为key存储对应项的布局信息即可：

  import { useRef } from 'react';
  import { FlatList, TouchableOpacity, Text } from 'react-native';
  
  // 组件内声明ref
  const itemLayoutsRef = useRef({});
  
  <FlatList
    keyExtractor={(item) => item.id}
    data={data}
    renderItem={({item}) => (
      <TouchableOpacity 
        onLayout={(event) => {
          // 存储当前项的布局信息到ref
          itemLayoutsRef.current[item.id] = event.nativeEvent.layout;
        }} 
        onPress={()=>{
          const currentLayout = itemLayoutsRef.current[item.id];
          console.log('当前元素Y坐标：', currentLayout?.y);
        }}>
        <Text>{item.text}</Text>
      </TouchableOpacity>
  )}/>
  

• 方案2：类组件使用实例属性存储布局值
  原理和ref一致，直接在组件实例上挂载存储对象即可，不会触发重渲染：

  export default class DemoList extends React.Component {
    constructor(props) {
      super(props);
      // 实例上挂载布局存储对象
      this.itemLayouts = {};
    }
  
    render() {
      return (
        <FlatList
          keyExtractor={(item) => item.id}
          data={this.props.data}
          renderItem={({item}) => (
            <TouchableOpacity 
              onLayout={(event) => {
                this.itemLayouts[item.id] = event.nativeEvent.layout;
              }} 
              onPress={()=>{
                console.log('当前元素Y坐标：', this.itemLayouts[item.id]?.y);
              }}>
              <Text>{item.text}</Text>
            </TouchableOpacity>
        )}/>
      )
    }
  }
  

• 补充：如果需要获取元素相对于屏幕的绝对Y坐标，可以直接在点击回调中调用元素的测量方法，不需要提前存储布局值：

  // 函数组件示例
  const itemRef = useRef(null);
  
  <TouchableOpacity
    ref={itemRef}
    onPress={() => {
      itemRef.current.measureInWindow((x, y, width, height) => {
        console.log('元素相对于屏幕的绝对Y坐标：', y);
      })
    }}
  >
    <Text>{item.text}</Text>
  </TouchableOpacity>
  

注意：不推荐用state存储每个列表项的布局值，onLayout在布局阶段就会触发，更新state会导致组件甚至整个列表重渲染，列表项较多时会明显卡顿，仅当布局值需要直接参与UI渲染时再考虑该方案。

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