React Native中如何将返回按钮设置在头部左侧并调整样式？

当前代码存在两个影响布局的问题：

• 给子元素backBtn设置的alignItems: 'flex-start'属性无效，alignItems是父容器控制自身子元素对齐的属性，写在子元素样式上不会生效
• 头部容器header设置了justifyContent: 'center'，所有横向排列的子元素会整体居中，无法让返回按钮单独靠左

以下是两种可直接落地的实现方案：

方案1：绝对定位实现（推荐） #

直接固定返回按钮在头部左侧，不影响标题的居中效果，无需额外新增DOM元素。

修改后的样式代码： #

header: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    // 新增相对定位，作为返回按钮绝对定位的参照物
    position: 'relative',
},
backBtn: {
    // 新增绝对定位属性
    position: 'absolute',
    left: 16, // 可根据需求调整左侧边距
    top: 35, // 替换原有marginTop属性
    backgroundColor: 'blue'
},
headerText: {
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 35,
    backgroundColor: 'red'
},

方案2：space-between两端对齐实现 #

给容器设置主轴两端对齐，右侧新增同宽占位元素保证标题完全居中。

修改后的JSX代码： #

<View style={styles.header}>
      <AntDesign style={styles.backBtn} name="arrowleft" size={24} color="black" />
      <Text style={styles.headerText}>My Page</Text>
      {/* 新增右侧占位元素，宽度和返回按钮保持一致 */}
      <View style={styles.placeholder} />
 </View>

修改后的样式代码： #

header: {
        flex: 1,
        // 替换原有justifyContent属性为两端对齐
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
    },
    backBtn: {
        marginTop: 35,
        backgroundColor: 'blue',
        width: 24, // 明确返回按钮宽度
    },
    headerText: {
        fontWeight: 'bold',
        fontSize: 18,
        marginTop: 35,
        backgroundColor: 'red'
    },
    placeholder: {
        width: 24, // 和返回按钮宽度保持一致
        marginTop: 35,
    },

两种方案均可实现返回按钮左对齐、标题居中的效果，优先推荐方案1，代码更简洁性能更好。

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