如何渲染高度动态变化的React Native FlatList列表项？

问题背景 #

想要实现卡片高度自适应的两列布局，但使用FlatList的numColumns属性后，每行卡片会被强制拉平为同一高度，无法达到不同卡片高度自由变化的效果。

当前实现代码 #

ProductCard组件 #

const ProductCard = ({
  title,
  description,
  photoHeight,
  lockStatus,
  imgUrl,
  onPress,
}) => {
  return (
    <TouchableOpacity onPress={onPress} style={[styles.container]}>
      <View
        style={{
          height: photoHeight || 177,
          width: '100%',
        }}>
        <FastImage style={{flex: 1, borderRadius: 20}} source={imgUrl} />
      </View>
      <View
        style={{
          width: '100%',
          padding: 10,
          gap: 10,
        }}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%',
          }}>
          <Typography.H color={colors.points}>{title}</Typography.H>
          <LockStatus lockStatus={lockStatus} />
        </View>
        <Typography.H1>{description}</Typography.H1>
      </View>
    </TouchableOpacity>
  );
};

export default ProductCard;

卡片样式 #

import {StyleSheet, Dimensions, Platform} from 'react-native';
import {colors} from '../../config/colors';
const width = Dimensions.get('window').width;

export default StyleSheet.create({
  container: {
    width: '45%',
    borderRadius: 20,
    alignItems: 'center',
    backgroundColor: colors.chipGray,
    borderWidth: 2,
    borderColor: colors.white,
    ...Platform.select({
      ios: {
        shadowColor: 'black',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 4,
      },
    }),
    marginHorizontal: 8,
  },
});

FlatList配置 #

<OptimizedFlatlist
  contentContainerStyle={styles.flatListContainer}
  renderItem={listItems}
  data={arr}
  numColumns={2}
/>

FlatList样式 #

flatListContainer: {
  gap: 10,
  alignItems: 'center',
  width: '100%',
},

列表项渲染 #

const listItems = ({item}) => {
  return (
    <ProductCard
      title={'KFC'}
      photoHeight={item}
      description={'Buy 1 Get 1 Everything at ₹199'}
    />
  );
};

测试数据 #

const arr = [150, 29, 200, 49, 54, 66, 71, 80, 90, 10];

解决方案 #

numColumns属性会强制每行所有item高度一致，要实现动态高度的两列布局，需改用单列FlatList + flexWrap布局：

1. 修改FlatList配置 #

移除numColumns，调整contentContainerStyle实现自动换行：

<OptimizedFlatlist
  contentContainerStyle={styles.flatListContainer}
  renderItem={listItems}
  data={arr}
/>

2. 更新FlatList样式 #

设置flex方向为横向，开启自动换行，并调整间距和对齐方式：

flatListContainer: {
  gap: 10,
  paddingHorizontal: 8,
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  width: '100%',
},

3. 调整卡片宽度计算 #

精确计算卡片宽度，确保刚好适配两列布局，移除强制居中对齐：

import {StyleSheet, Dimensions, Platform} from 'react-native';
import {colors} from '../../config/colors';
const { width: screenWidth } = Dimensions.get('window');
// 计算卡片宽度：屏幕宽度 - 左右边距(8*2) - 列间距(10)，再除以2
const cardWidth = (screenWidth - 16 - 10) / 2;

export default StyleSheet.create({
  container: {
    width: cardWidth,
    borderRadius: 20,
    backgroundColor: colors.chipGray,
    borderWidth: 2,
    borderColor: colors.white,
    ...Platform.select({
      ios: {
        shadowColor: 'black',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 4,
      },
    }),
    marginBottom: 10,
  },
});

原理说明 #

• 移除numColumns后，FlatList回归单列模式，通过flexDirection: 'row'和flexWrap: 'wrap'实现自动换行，每个卡片高度会根据自身内容（图片高度+文本高度）自适应
• 精确计算卡片宽度，配合边距和间距，确保两列布局规整
• 移除alignItems: 'center'避免强制拉平卡片高度

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