如何确定FlatList项高度，以计算无限滚动每页数据量？

问题原因 #

你的代码里ref无效、onLayout不触发，大概率是两个原因：

• 自定义Card组件没有转发ref，导致外部ref无法绑定到真实的原生View节点
• onLayout没有正确绑定到会触发布局事件的元素上，或者被组件内部逻辑拦截了

解决方案 #

1. 确保Card组件转发Ref（如果是自定义组件） #

如果Card是你自己写的组件，必须用React.forwardRef把外部传入的ref转发到内部的原生容器（比如View）上：

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

const Card = forwardRef((props, ref) => {
  return (
    <View ref={ref} style={/* 你的Card样式 */} {...props}>
      {/* Card内部内容 */}
    </View>
  );
});

2. 用onLayout可靠获取项高度 #

相比ref，onLayout是更稳定的获取布局尺寸的方式，直接给Card绑定onLayout事件，同时避免重复触发：

import { useState } from 'react';
import { FlatList, Dimensions } from 'react-native';

const [itemHeight, setItemHeight] = useState(null);
const screenHeight = Dimensions.get('window').height;

// 根据项高度计算每页加载数量
const calculatePageSize = (height) => {
  // 示例：按填满2屏的数量计算，可根据需求调整
  return Math.ceil((screenHeight * 2) / height);
};

const handleItemLayout = (event) => {
  if (!itemHeight) {
    const { height } = event.nativeEvent.layout;
    setItemHeight(height);
    const pageSize = calculatePageSize(height);
    // 这里可将pageSize用于无限滚动的分页请求逻辑
    console.log('每页应加载项数：', pageSize);
  }
};

const renderItem = ({ item }) => (
  <Card onLayout={handleItemLayout}>
    {/* 你的项内容 */}
  </Card>
);

// 渲染FlatList
<FlatList
  data={items}
  renderItem={renderItem}
/>

3. 注意事项 #

• 如果列表项高度不固定，这种方式仅适合用第一个项的高度做参考；若需精准计算，可结合FlatList的getItemLayout属性，但前提是你能提前知晓每个项的高度
• 不要依赖ref获取列表项高度，FlatList的组件复用机制会导致ref最终指向最后一个被复用的项，无法准确拿到初始项的高度

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