React Native可缩放网格（2x2/3x3等）：仅内部留间隙外部无间距实现问题

下面是几种满足你需求的实现方式，核心是保证网格元素仅内部有间隙，外部完全贴合父容器边缘：

方案1：使用gap属性（React Native 0.71+） #

RN 0.71及以上版本支持CSS的gap属性，直接给网格容器设置gap即可实现内部元素间的间隙，无需额外处理边缘，最简洁：

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

const Grid = ({ columns = 2, gap = 10, data }) => {
  const itemWidth = `${100 / columns}%`;
  return (
    <View style={[styles.gridContainer, { gap, flexDirection: 'row', flexWrap: 'wrap' }]}>
      {data.map((item, index) => (
        <View 
          key={index} 
          style={[styles.gridItem, { width: itemWidth }]}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  gridContainer: {
    // 无需额外padding/margin，gap仅作用于内部元素
  },
  gridItem: {
    aspectRatio: 1, // 保持正方形，可按需调整
    backgroundColor: '#ccc',
  },
});

方案2：条件性设置子元素margin（兼容全版本） #

通过判断子元素的位置，给非边缘元素添加margin，边缘元素去掉对应方向的margin：

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

const Grid = ({ columns = 2, gap = 10, data }) => {
  const totalItems = data.length;
  const itemWidth = `${100 / columns}%`;

  const getItemStyle = (index) => {
    const isFirstColumn = index % columns === 0;
    const isLastColumn = (index + 1) % columns === 0;
    const isFirstRow = index < columns;
    const isLastRow = index >= totalItems - columns;

    return {
      width: itemWidth,
      marginLeft: isFirstColumn ? 0 : gap,
      marginRight: isLastColumn ? 0 : gap,
      marginTop: isFirstRow ? 0 : gap,
      marginBottom: isLastRow ? 0 : gap,
    };
  };

  return (
    <View style={styles.gridContainer}>
      {data.map((item, index) => (
        <View 
          key={index} 
          style={[styles.gridItem, getItemStyle(index)]}
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  gridContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  gridItem: {
    aspectRatio: 1,
    backgroundColor: '#ccc',
  },
});

方案3：嵌套容器抵消间距（兼容全版本） #

通过外层容器设负margin，内层容器设padding，用padding实现内部间隙，负margin抵消外层的padding，让整体贴合边缘：

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

const Grid = ({ columns = 2, gap = 10, data }) => {
  const itemWidth = `${100 / columns}%`;
  return (
    <View style={[styles.outerContainer, { margin: -gap / 2 }]}>
      <View style={[styles.innerContainer, { padding: gap / 2 }]}>
        <View style={styles.gridRowContainer}>
          {data.map((item, index) => (
            <View 
              key={index} 
              style={[styles.gridItem, { width: itemWidth }]}
            />
          ))}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  outerContainer: {
    overflow: 'hidden', // 防止子元素溢出（可选）
  },
  innerContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  gridItem: {
    aspectRatio: 1,
    backgroundColor: '#ccc',
  },
});

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