如何获取FlatList在屏幕上的可见高度，以便为其children设置对应高度？

核心实现思路 #

FlatList的可见高度就是其自身渲染的滚动视口高度，直接通过组件自带的onLayout回调即可获取，拿到高度后存入状态传递给子元素即可。

完整代码示例 #

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

const DemoComponent = () => {
  // 存储FlatList可见高度，初始值设为0
  const [listVisibleHeight, setListVisibleHeight] = useState(0);

  const renderListItem = ({ item }) => {
    // 子元素直接使用获取到的高度
    return (
      <View style={{ height: listVisibleHeight }}>
        <Text>{item.title}</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={你的数据源数组}
      renderItem={renderListItem}
      // 布局变化时自动获取当前FlatList的可见高度
      onLayout={(event) => {
        const { height } = event.nativeEvent.layout;
        setListVisibleHeight(height);
      }}
    />
  );
};

注意事项 #

• onLayout返回的高度包含FlatList自身的内边距（padding），不包含外边距（margin），如果需要纯内容高度可自行扣除对应padding值
• 首次渲染时高度为0，可添加判断逻辑在listVisibleHeight > 0时再渲染子元素，避免布局闪烁
• 如果FlatList嵌套在ScrollView中，此时FlatList会默认撑开为所有子元素的总高度，onLayout无法拿到可见视口高度，改为监听外层ScrollView的onLayout即可获取正确的可见高度

内容的提问来源于stack exchange，提问作者Muhammad Rafeh Atique