ScrollView嵌套FlatList网格最后一行内容高度显示不全问题排查

问题场景 #

使用Native Base组件，在ScrollView中通过FlatList实现numColumns=2的网格布局时，出现最后一行内容高度无法完整显示的问题。

问题代码 #

const [data, setData] = useState([
  { id: 1, title: "DA’s Backyard" },
  { id: 2, title: "KC’s Backyard" },
  { id: 3, title: "LA’s Backyard" },
  { id: 4, title: "KP’s Backyard" },
  { id: 5, title: "LA’s Backyard" },
  { id: 6, title: "KP’s Backyard" },
]);

<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ width: "100%", alignItems: "center" }}>
  <Stack flexWrap={"wrap"} justifyContent="center">
    <SelectBox />
    <FlatList 
      mt={"4"} 
      showsVerticalScrollIndicator={false} 
      data={data} 
      keyExtractor={(item, index) => index} 
      numColumns={2} 
      renderItem={(data, index) => {
        return <PortfolioCard />;
      }} 
    />
  </Stack>
</ScrollView>

问题原因 #

1. 滚动容器嵌套冲突：ScrollView和FlatList都是滚动容器，嵌套后FlatList无法正确计算自身高度，导致内容被截断。
2. Stack布局属性干扰：给Stack设置flexWrap="wrap"完全没必要，反而会打乱FlatList的高度计算逻辑。
3. FlatList无明确高度约束：嵌套场景下，FlatList没有明确的高度或flex属性，无法撑满所需空间。

解决方案 #

方案一：移除外层ScrollView（优先推荐）

把顶部的SelectBox放到FlatList的ListHeaderComponent里，避免滚动容器嵌套，这是最稳妥的做法：

<FlatList 
  showsVerticalScrollIndicator={false} 
  data={data} 
  keyExtractor={(item, index) => index} 
  numColumns={2} 
  // 把SelectBox作为列表头部
  ListHeaderComponent={
    <>
      <SelectBox />
      <Box mt={"4"} />
    </>
  }
  renderItem={() => <PortfolioCard />} 
/>

方案二：保留ScrollView的修复方式

如果必须保留外层ScrollView，调整布局结构：

<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ flexGrow: 1, width: "100%" }}>
  <Stack justifyContent="center">
    <SelectBox />
    <FlatList 
      mt={"4"} 
      showsVerticalScrollIndicator={false} 
      data={data} 
      keyExtractor={(item, index) => index} 
      numColumns={2} 
      // 给FlatList设置flex:1让它撑满剩余空间
      style={{ flex: 1, width: "100%" }}
      renderItem={() => <PortfolioCard />} 
    />
  </Stack>
</ScrollView>

方案三：统一卡片高度

网格布局下，所有PortfolioCard的高度必须一致，否则会导致布局计算偏差，给卡片设置固定高度或统一的flex布局：

// PortfolioCard示例
const PortfolioCard = () => {
  return (
    <Box w="48%" h={220} bg="gray.100" p={4} mb={4} borderRadius={4}>
      <Text>{/* 卡片标题 */}</Text>
      {/* 其他内容 */}
    </Box>
  );
};

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