React Native 无需指定flexDirection实现正方形适配容器居中显示

算力阿峰

2026-10-2

解决方案

核心是通过限制正方形的最大宽高，避免flex属性在不同主轴方向上的拉伸溢出，无需手动指定flexDirection即可适配任意宽高比例的父容器。

修改要点

移除square样式中的flex: 1配置，避免元素沿父容器主轴方向强行拉伸
给square新增maxWidth: '100%'、maxHeight: '100%'约束，保证正方形不会超出父容器边界
给行容器（row_1、row_2）新增justifyContent: 'center'属性，保证正方形在主轴方向也能居中

完整修改后代码

import React from "react";
import { StyleSheet, View } from "react-native";

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row_1}>
        <View style={styles.square} />
      </View>
      <View style={styles.row_2}>
        <View style={styles.square} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  row_1: {
    flex: 1,
    backgroundColor: "red",
    alignItems: "center",
    justifyContent: "center",
    padding: 10
  },
  row_2: {
    flex: 5,
    backgroundColor: "blue",
    alignItems: "center",
    justifyContent: "center",
    padding: 10
  },
  square: {
    aspectRatio: 1,
    backgroundColor: "white",
    width: "100%",
    height: "100%",
    maxWidth: "100%",
    maxHeight: "100%"
  }
});

export default App;