React Native中如何获取FlatList的实际高度？

你当前用onLayout拿到的是FlatList组件本身的容器高度，不是内部内容的总高度——因为你的外层View设置了flex:1，FlatList默认会占满父容器的可用空间，所以不管数据项数量多少，这个高度都是固定值。

要获取FlatList的实际内容总高度，可以用以下两种方法：

方法一：使用FlatList的onContentSizeChange回调 #

这是React Native官方提供的、专门用于监听内容尺寸变化的方法，会直接返回内容的宽度和高度：

<View style={{ flex: 1, backgroundColor: "lightgreen" }}>
  <FlatList
    onContentSizeChange={(width, height) => {
      console.log("实际内容高度", height);
    }}
    contentContainerStyle={{ backgroundColor: "red" }}
    data={[12, 35, 45, 78, 89, 56]}
    renderItem={({ item }) => {
      return <Text>{item}</Text>;
    }}
    keyExtractor={item => item.toString()}
  />
</View>

方法二：给contentContainer添加ref并调用measure #

如果需要更精准的布局信息，可以给FlatList的contentContainer设置ref，然后通过measure方法获取其尺寸：

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

export default function App() {
  const contentRef = useRef(null);

  const handleMeasure = () => {
    contentRef.current?.measure((x, y, width, height) => {
      console.log("实际内容高度", height);
    });
  };

  return (
    <View style={{ flex: 1, backgroundColor: "lightgreen" }}>
      <FlatList
        contentContainerStyle={{ backgroundColor: "red" }}
        contentContainerRef={contentRef}
        onLayout={handleMeasure} // 或者在数据加载完成后调用
        data={[12, 35, 45, 78, 89, 56]}
        renderItem={({ item }) => {
          return <Text>{item}</Text>;
        }}
        keyExtractor={item => item.toString()}
      />
    </View>
  );
}

注意：如果数据是异步加载的，需要在数据加载完成后再调用measure，确保内容已经渲染完成。

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