如何让100%宽度父容器的子元素实现等宽等高响应式正方形？

这个适配问题我经常遇到，给你几个实用的解决办法：

利用Flexbox让子View自动平分父容器的可用宽度，再通过aspectRatio属性强制宽高1:1，就能完美实现自适应的正方形布局，还能轻松处理间距。

如果你的React Native版本在0.64以上，推荐用gap来设置子View之间的间距，比margin更省心：

<View style={styles.container}>
  <View style={styles.item} />
  <View style={styles.item} />
  <View style={styles.item} />
  <View style={styles.item} />
</View>

const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    gap: 10, // 子View之间的间距，无需单独处理最后一个元素
  },
  item: {
    flex: 1, // 自动平分父容器的可用宽度
    aspectRatio: 1, // 强制宽高比1:1，保证是正方形
    backgroundColor: "red",
  },
});

如果你的版本较低不支持gap，可以用margin来替代，只需要给最后一个子View去掉右边距即可：

<View style={styles.container}>
  {[1,2,3,4].map((_, index) => (
    <View 
      style={[
        styles.item, 
        index !== 3 && styles.itemMargin // 最后一个元素不加右边距
      ]} 
      key={index} 
    />
  ))}
</View>

const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
  },
  item: {
    flex: 1,
    aspectRatio: 1,
    backgroundColor: "red",
  },
  itemMargin: {
    marginRight: 10,
  },
});

注意：aspectRatio属性是React Native 0.48版本开始支持的，绝大多数项目都能直接用

如果你的项目还在使用非常老的React Native版本（不支持aspectRatio），可以通过onLayout事件获取父容器的实际宽度，再手动计算每个子View的尺寸：

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

export default function YourComponent() {
  const [itemSize, setItemSize] = useState(0);
  const totalItems = 4;
  const itemGap = 10;

  // 获取父容器布局完成后的宽度，计算子View尺寸
  const handleContainerLayout = useCallback((event) => {
    const containerWidth = event.nativeEvent.layout.width;
    // 公式：(容器总宽度 - (子元素数量-1)*间距) / 子元素数量
    const calculatedSize = (containerWidth - (totalItems - 1) * itemGap) / totalItems;
    setItemSize(calculatedSize);
  }, [totalItems, itemGap]);

  return (
    <View style={styles.container} onLayout={handleContainerLayout}>
      {[1,2,3,4].map((_, index) => (
        <View 
          style={[
            styles.item, 
            { width: itemSize, height: itemSize },
            index !== totalItems - 1 && { marginRight: itemGap }
          ]} 
          key={index} 
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
  },
  item: {
    backgroundColor: "red",
  },
});

这个方法的优势是完全兼容所有版本，不管父容器是屏幕宽度还是嵌套在其他容器里，都能精准计算出子View的尺寸，不会出现溢出问题。

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