React Native中Margin与Flex布局问题：网格换行及文本偏移求助

方案1：基于容器边距动态计算盒子尺寸（推荐） #

直接在计算盒子尺寸时把容器的左右边距扣除，这样三个盒子总宽度刚好适配容器，既保留边距又不会换行：

1. 定义自定义边距值，给容器添加上下左右边距
2. 修改size计算逻辑，把边距的两倍（左右各一份）从屏幕最小边中减去
3. 确保盒子内部文本同时垂直+水平居中

修改后的完整代码：

import React from 'react';
import { StyleSheet, View, Text, SafeAreaView, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window'); 
const containerMargin = 10; // 自定义边距值
const boxSize = (Math.min(width, height) - 2 * containerMargin) / 3; 

const Grid = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <View style={styles.row}>
          <View style={styles.box}>
            <Text style={styles.text}>1</Text>
          </View>
          <View style={styles.box}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={styles.box}>
            <Text style={styles.text}>3</Text>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {},
  container: {
    flex: 1,
    justifyContent: 'center',
    margin: containerMargin,
  },
  box: {
    width: boxSize,
    height: boxSize,
    justifyContent: 'center',
    alignItems: 'center', // 确保文本水平居中
    borderWidth: 1
  },
  row: {
    flexDirection: 'row', 
  },
});

export default Grid;

方案2：用Flex布局修复文本偏移 #

如果坚持用flex:1+aspectRatio的方式，只需补充文本水平居中属性，同时去掉不必要的换行设置：

1. 给box样式添加alignItems: 'center'，让文本水平居中
2. 移除row的flexWrap: 'wrap'（三个flex:1的盒子会自动平分容器宽度，不会换行）
3. 给container添加需要的边距

关键样式修改：

box: {
  flex: 1,
  aspectRatio: 1,
  justifyContent: 'center',
  alignItems: 'center', // 新增：解决文本水平偏移
  borderWidth: 1
},
row: {
  flexDirection: 'row', 
  // 删除flexWrap: 'wrap'
},
container: {
  flex: 1,
  justifyContent: 'center',
  margin: 10, // 添加边距
}

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