React Native单数据集内容溢出拆分至固定高度卡片的实现方案

核心思路 #

因为数据来自单一数组，且需要固定卡片高度，核心是预计算内容项高度，将原数组拆分为多个符合卡片高度限制的子数组，每个子数组对应一张卡片，最后渲染这些卡片即可。

具体实现步骤 #

1. 计算内容项的实际高度 #

要准确拆分数据，必须先获取每个内容项的真实高度。可以通过onLayout事件获取元素渲染后的高度，示例如下：

// 保存每个内容项的高度
const [itemHeights, setItemHeights] = useState({});

const handleItemLayout = (id, e) => {
  const { height } = e.nativeEvent.layout;
  setItemHeights(prev => ({ ...prev, [id]: height }));
};

// 先渲染一次所有内容获取高度（可以隐藏在视图外）
<View style={{ position: 'absolute', opacity: 0 }}>
  {DATA.map(item => (
    <Text key={item.id} onLayout={(e) => handleItemLayout(item.id, e)}>
      {item.text}
    </Text>
  ))}
</View>

2. 拆分原数组为卡片分组 #

基于获取到的内容项高度，按照固定卡片高度进行分组：

import { useState, useEffect } from 'react';

// 自定义Hook：将单一数组拆分为符合卡片高度的分组
const useSplitDataIntoCardGroups = (data, cardHeight, itemHeights) => {
  const [cardGroups, setCardGroups] = useState([]);

  useEffect(() => {
    if (!data.length || Object.keys(itemHeights).length !== data.length) return;

    const groups = [];
    let currentGroup = [];
    let currentTotalHeight = 0;

    data.forEach(item => {
      const height = itemHeights[item.id];
      // 加入当前项后超过卡片高度，且当前组已有内容，则完成当前组
      if (currentTotalHeight + height > cardHeight && currentGroup.length > 0) {
        groups.push([...currentGroup]);
        currentGroup = [item];
        currentTotalHeight = height;
      } else {
        currentGroup.push(item);
        currentTotalHeight += height;
      }
    });

    // 加入最后一组
    if (currentGroup.length) groups.push(currentGroup);
    setCardGroups(groups);
  }, [data, cardHeight, itemHeights]);

  return cardGroups;
};

3. 渲染分组后的卡片 #

用FlatList渲染拆分后的卡片组，每个卡片设置固定高度：

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

const FixedHeightCardComponent = () => {
  const DATA = [
    { id: '1', text: '短内容1' },
    { id: '2', text: '中等长度内容，用来测试高度累加' },
    { id: '3', text: '这是一段很长的测试文本，当加入当前卡片后会超过固定高度阈值，所以会被拆分到下一张卡片中。这里填充足够多的文字来模拟高度溢出的场景。' },
    { id: '4', text: '短内容4' },
    { id: '5', text: '另一段中等长度的内容，继续测试分组逻辑' },
  ];
  const CARD_FIXED_HEIGHT = 200; // 固定卡片高度
  const [itemHeights, setItemHeights] = useState({});

  // 处理内容项高度测量
  const handleItemLayout = (id, e) => {
    const { height } = e.nativeEvent.layout;
    setItemHeights(prev => ({ ...prev, [id]: height }));
  };

  // 获取拆分后的卡片组
  const cardGroups = useSplitDataIntoCardGroups(DATA, CARD_FIXED_HEIGHT, itemHeights);

  // 渲染单张卡片
  const renderCard = ({ item }) => (
    <View style={styles.card}>
      {item.map(content => (
        <Text key={content.id} style={styles.cardItem}>
          {content.text}
        </Text>
      ))}
    </View>
  );

  return (
    <FlatList
      data={cardGroups}
      renderItem={renderCard}
      keyExtractor={(_, idx) => `card-${idx}`}
      style={styles.container}
      padding={16}
    >
      {/* 隐藏的高度测量视图 */}
      <View style={{ position: 'absolute', opacity: 0 }}>
        {DATA.map(item => (
          <Text key={item.id} onLayout={(e) => handleItemLayout(item.id, e)}>
            {item.text}
          </Text>
        ))}
      </View>
    </FlatList>
  );
};

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  card: {
    height: 200,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 8,
    padding: 12,
    marginBottom: 12,
    overflow: 'hidden', // 确保超出部分不显示（已拆分到下一张）
  },
  cardItem: {
    fontSize: 16,
    marginBottom: 8,
    lineHeight: 22,
  },
});

export default FixedHeightCardComponent;

注意事项 #

• 高度测量准确性：必须等待所有内容项的高度都获取到后再进行分组，避免拆分逻辑出错。
• 动态内容适配：如果内容是动态更新的，需要重新触发高度测量和分组计算。
• 性能优化：数据量较大时，可将分组计算逻辑用useMemo缓存，或放到useEffect中避免重复计算。

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