如何在React Native中实现带间隙的三格方形自适应布局？

先定义统一的间隙大小，再基于可用宽度计算每个方块的尺寸，避免硬编码：

import { View, StyleSheet, Dimensions } from 'react-native';
// 假设ThemedText和useThemedStyles已正确导入

export default function TrendingSection() {
  const themedStyles = useThemedStyles();
  const gap = 8; // 可根据需求调整间隙大小
  const availableWidth = Dimensions.get('window').width - 40; // 减去左右各20px内边距
  const smallSquareSize = (availableWidth - gap) / 3; // 小方块的宽高
  const largeSquareWidth = smallSquareSize * 2;
  const largeSquareHeight = smallSquareSize * 2 + gap; // 大高度匹配右侧两个小方块加间隙的总高度

  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <ThemedText style={themedStyles.subHeader}>Trending</ThemedText>
        <ThemedText style={[themedStyles.accentText, {fontWeight: 'bold'}]}>
          See all
        </ThemedText>
      </View>

      <View style={styles.cardContainer}>
        {/* 大方形 */}
        <View
          style={{
            width: largeSquareWidth,
            height: largeSquareHeight,
            backgroundColor: 'white',
            borderWidth: 2,
            marginRight: gap, // 右侧间隙
          }}
        />

        {/* 右侧小方形列容器 */}
        <View style={styles.smallSquareColumn}>
          <View
            style={{
              width: smallSquareSize,
              height: smallSquareSize,
              backgroundColor: 'white',
              borderWidth: 2,
              marginBottom: gap, // 下方间隙
            }}
          />
          <View
            style={{
              width: smallSquareSize,
              height: smallSquareSize,
              backgroundColor: 'white',
              borderWidth: 2,
            }}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    paddingHorizontal: 20, // 把水平内边距统一写在这里，简化宽度计算
  },
  textContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 16, // 增加标题和网格的间距，优化视觉
  },
  cardContainer: {
    flexDirection: 'row',
  },
  smallSquareColumn: {
    flexDirection: 'column',
  },
});

关键逻辑说明： #

• 间隙实现：通过margin控制方块间的间距，避免直接修改尺寸导致布局错位
• 尺寸推导：
  1. 可用宽度 = 屏幕宽度 - 左右20px内边距
  2. 大方形宽度是小方形的2倍，加上两者间的1个间隙，总宽度公式为 2*小尺寸 + 间隙 + 小尺寸 = 可用宽度，推导得小尺寸 = (可用宽度 - 间隙)/3
  3. 大方形高度 = 2*小尺寸 + 间隙，确保和右侧两个小方块（含中间间隙）的总高度完全对齐
• 代码优化：将水平内边距移到容器样式中，减少重复计算；添加标题底部间距提升页面美观度

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