React Native实现横向双行FlatList：首项全高 其余项半高排列

原有代码无法达到预期，核心问题出在3个地方：

• FlatList的numColumns属性是全局固定列配置，原生不支持单个列表项跨多行/多列的布局，你用Math.ceil(photos.length/2)动态计算列数，会导致列数随照片总数变化，布局完全失控
• 多列模式下FlatList会强制给所有项分配相同宽度，你单独给index=0的项设置自定义宽高，会直接打破默认布局流，出现元素错位、重叠的问题
• 硬编码100、50的固定宽高没有和容器高度绑定，既做不到“首项全高、其余项半高”的比例要求，也无法适配不同尺寸的设备。

采用左右拆分布局的方式实现，逻辑最稳定、性能最好，完全匹配需求：

• 外层固定相册总高度，所有图片尺寸基于总高度动态计算，保证比例正确
• 左侧单独渲染首张全高正方形大图
• 右侧用固定2列的FlatList渲染剩余图片，单张图尺寸为半高正方形，自动排成两行
• 外层套横向ScrollView支持长列表横向滚动，不需要滚动可以直接替换为普通View

可直接运行的代码 #

import { View, FlatList, Image, ScrollView, Dimensions } from 'react-native';

// 相册总高度，可按需调整，这里取屏幕宽度45%做自适应
const ALBUM_HEIGHT = Dimensions.get('window').width * 0.45;
// 图片之间的间距
const GAP = 4;

const PhotoGrid = ({ photos }) => {
  // 拆分首图和剩余图片
  const [firstPhoto, ...restPhotos] = photos;
  // 首图尺寸：总高度减去上下间距，宽高相等为正方形
  const bigImgSize = ALBUM_HEIGHT - GAP * 2;
  // 小图尺寸：总高度减去上下、中间行间距后均分2份，宽高相等为正方形
  const smallImgSize = (ALBUM_HEIGHT - GAP * 3) / 2;

  return (
    <View style={{ height: ALBUM_HEIGHT, padding: GAP }}>
      <ScrollView 
        horizontal 
        showsHorizontalScrollIndicator={false}
      >
        {/* 渲染左侧首张大图 */}
        {firstPhoto && (
          <Image
            source={firstPhoto.image}
            style={{
              width: bigImgSize,
              height: bigImgSize,
              borderRadius: 8,
              marginRight: GAP,
            }}
          />
        )}
        {/* 渲染右侧两列小图 */}
        <FlatList
          scrollEnabled={false}
          data={restPhotos}
          numColumns={2}
          keyExtractor={(item) => item.id}
          columnWrapperStyle={{ gap: GAP, marginBottom: GAP }}
          renderItem={({ item }) => (
            <Image
              source={item.image}
              style={{
                width: smallImgSize,
                height: smallImgSize,
                borderRadius: 8,
              }}
            />
          )}
        />
      </ScrollView>
    </View>
  );
};

export default PhotoGrid;

调整说明 #

• 如果不需要横向滚动，只需要展示固定数量的图片（比如类似微信朋友圈最多9张图的场景），直接把外层的ScrollView替换为普通View即可，布局会自动适配内容宽度
• 圆角、间距、总高度参数可以根据设计稿直接修改常量值即可，不需要调整布局逻辑
• 如果需要支持更复杂的跨行跨列瀑布流效果，可以替换为@shopify/flash-list做自定义布局，上述拆分方案已经可以100%覆盖你提出的布局需求。

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