如何在React Native FlatList中设置均等的水平与垂直间距？

你可以通过给列表项添加marginBottom来实现和水平间隔一致的垂直间距，具体修改如下：

方案一：简单实现（推荐） #

给每个列表项添加marginBottom: '1%'，同时给FlatList的内容容器设置paddingBottom: '1%'抵消最后一行的底部间距，这样水平和垂直间隔的视觉大小完全一致：

修改后的完整代码：

const renderItem = ({ item }) => (
  <Pressable onPress={() => alert(item.name)} style={{
        aspectRatio: 1,
        width: "49.5%",
        position: "relative",
        marginBottom: "1%" // 添加垂直间距
      }}>
    <Image
      style={{
        width: "100%",
        height: "100%"
      }}
      source={{
        uri: item.url,
      }}
    />
    <View
      style={{
        position: "absolute",
        zIndex: 3,
        bottom: 0,
        paddingHorizontal: 2,
        paddingVertical: 8,
        flexDirection: "row",
        alignItems: "center",
      }}
    >
      <Text style={{ color: "white", fontSize: 16 }}>{item.name}</Text>
    </View>
  </Pressable>
);

export default function App() {
  return (
    <FlatList
      numColumns={2}
      data={people}
      renderItem={renderItem}
      columnWrapperStyle={{
        justifyContent: "space-between"
      }}
      contentContainerStyle={{
        paddingBottom: "1%" // 抵消最后一行的marginBottom
      }}       
    />
  );
}

方案二：精准控制最后一行 #

如果你不想让最后一行保留底部间距，可以通过判断列表项的索引，给非最后一行的项添加marginBottom：

const renderItem = ({ item, index }) => {
  // 计算当前项是否属于最后一行
  const totalRows = Math.ceil(people.length / 2);
  const currentRow = Math.floor(index / 2) + 1;
  const isLastRow = currentRow === totalRows;

  return (
    <Pressable onPress={() => alert(item.name)} style={{
          aspectRatio: 1,
          width: "49.5%",
          position: "relative",
          marginBottom: isLastRow ? 0 : "1%"
        }}>
      {/* 内部内容与之前一致 */}
    </Pressable>
  );
};

export default function App() {
  return (
    <FlatList
      numColumns={2}
      data={people}
      renderItem={renderItem}
      columnWrapperStyle={{
        justifyContent: "space-between"
      }}       
    />
  );
}

原理说明 #

你当前通过width: "49.5%"配合columnWrapperStyle: { justifyContent: "space-between" }，让水平方向两个列表项之间的空隙占容器宽度的1%。设置marginBottom: "1%"后，垂直方向的间距大小和水平间距完全匹配，实现视觉上的等宽间隔。

（截图说明：截图展示了两列布局的图片列表，每个图片下方叠加了白色名称文本，当前水平方向已有间隔，但垂直方向无间距，图片上下紧密排列）

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