求助：基于API数据实现动态FlatList网格布局（含特殊排版）

直接上代码实现，完全匹配你的需求：

首先引入必要模块：

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

const { width: screenWidth } = Dimensions.get('window');
// 基础高度，可根据视觉需求调整比例
const BASE_HEIGHT = screenWidth * 0.8;

组件实现：

const DynamicImageGrid = ({ data }) => {
  const renderItem = ({ item, index }) => {
    const totalItems = data.length;
    let itemStyle = {};

    if (totalItems === 1) {
      // 1张图：全屏宽度
      itemStyle = styles.singleItem;
    } else if (totalItems === 2) {
      // 2张图：各占一半宽度
      itemStyle = index % 2 === 0 ? styles.twoColumnLeft : styles.twoColumnRight;
    } else {
      if (index === 0) {
        // 第1张：左半屏，占满基础高度
        itemStyle = styles.firstItem;
      } else if (index === 1 || index === 2) {
        // 第2、3张：右半屏，平分基础高度
        itemStyle = index === 1 ? styles.rightTopItem : styles.rightBottomItem;
      } else {
        // 第4张及以后：按两列网格排列，高度为基础高度的一半
        const isEvenIndex = (index - 3) % 2 === 0;
        itemStyle = isEvenIndex ? styles.gridLeftItem : styles.gridRightItem;
      }
    }

    return (
      <View style={itemStyle}>
        <Image
          source={{ uri: item.imageUrl }}
          style={styles.image}
          resizeMode="cover"
        />
        {/* 这里可添加图片的标题、描述等其他信息 */}
      </View>
    );
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
      contentContainerStyle={styles.listContainer}
    />
  );
};

const styles = StyleSheet.create({
  listContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
  },
  singleItem: {
    width: screenWidth,
    height: BASE_HEIGHT,
    marginBottom: 1,
  },
  twoColumnLeft: {
    width: screenWidth / 2 - 0.5,
    height: BASE_HEIGHT,
    marginRight: 1,
    marginBottom: 1,
  },
  twoColumnRight: {
    width: screenWidth / 2 - 0.5,
    height: BASE_HEIGHT,
    marginBottom: 1,
  },
  firstItem: {
    width: screenWidth / 2,
    height: BASE_HEIGHT,
    marginRight: 1,
    marginBottom: 1,
  },
  rightTopItem: {
    width: screenWidth / 2 - 1,
    height: BASE_HEIGHT / 2 - 0.5,
    marginBottom: 1,
  },
  rightBottomItem: {
    width: screenWidth / 2 - 1,
    height: BASE_HEIGHT / 2 - 0.5,
  },
  gridLeftItem: {
    width: screenWidth / 2 - 0.5,
    height: BASE_HEIGHT / 2,
    marginRight: 1,
    marginBottom: 1,
  },
  gridRightItem: {
    width: screenWidth / 2 - 0.5,
    height: BASE_HEIGHT / 2,
    marginBottom: 1,
  },
  image: {
    width: '100%',
    height: '100%',
  },
});

export default DynamicImageGrid;

代码说明 #

• 核心逻辑是根据图片总数和当前item索引，动态计算每个item的宽高与间距
• 用FlatList的contentContainerStyle开启横向排列+自动换行，替代固定numColumns的死板布局
• 基础高度基于屏幕宽度设置，保证不同设备的适配性
• 1px间距用于避免布局错位，可根据需求调整
• 图片用resizeMode="cover"保证填充容器且不变形

使用方式 #

传入API返回的对象数组即可，数组每个对象需包含id（用于唯一标识）和imageUrl（图片地址），其他信息可在renderItem中添加展示。

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