递归配置渲染Flex嵌套动态容器效果异常如何解决

我近期在完成一项开发练习，目标是生成如下样式的动态容器：

参考配置结构支持任意深度的嵌套，可覆盖各类布局场景：

const Container = {
    componentList: [{
        componentList: ["a", "b"],
        align: "v"
    }, "c"],
    align: "h"
}

我的实现思路是递归遍历配置结构，基于Flex布局渲染对应容器，目前已完成的核心代码如下：

<View
    style={{
        flexDirection: align === "v" ? "row" : "column",
        justifyContent: "center",
    }}>
    {components.map((component, index) => {
        if (typeof component === "string") {
            return (
                <View
                    key={index}
                    style={{
                        backgroundColor: randomColor(),
                        flex: 0,
                    }}>
                    {renderComps(component)}
                </View>
            )
        } else {
            return RECURSIVE_LOOP
        }
    })}
</View>

代码运行后实际渲染效果和预期存在明显差异，实际渲染效果如下：

我是CSS初学者，想知道当前实现存在什么问题，该如何调整才能得到符合配置要求的布局效果。

代码存在3个核心错误，直接导致布局偏离预期：

• align配置和flexDirection的映射逻辑完全写反：align: "v"代表垂直（上下）排列，对应flexDirection: "column"；align: "h"代表水平（左右）排列，对应flexDirection: "row"，现有判断刚好颠倒了排列方向。
• 嵌套递归的容器节点缺少弹性属性：仅给字符串类型的叶子组件写了样式，递归生成的父容器没有设置flex: 1，导致容器不会自动填充父级剩余空间，出现尺寸塌陷。
• 容器对齐属性配置错误：设置justifyContent: "center"会让所有子元素挤在容器中间，同时未设置alignItems: "stretch"，子元素不会在交叉轴方向自动撑满容器。

1. 修正flexDirection和align值的映射关系
2. 给所有递归生成的容器节点添加flex: 1，保证容器撑满可用空间
3. 调整容器对齐属性，移除居中配置，添加交叉轴拉伸属性，保证子元素填满容器
4. 叶子节点组件移除flex: 0的尺寸限制，添加弹性属性撑满分配到的空间，可按需添加内边距避免内容贴边

修正后的核心递归渲染代码参考：

// 递归渲染函数，接收当前节点配置
const renderContainer = (node) => {
  // 字符串类型直接渲染叶子组件
  if (typeof node === 'string') {
    return (
      <View 
        key={node} 
        style={{
          backgroundColor: randomColor(),
          flex: 1,
          padding: 16,
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        {renderComps(node)}
      </View>
    )
  }
  // 容器节点递归渲染子元素
  return (
    <View
      style={{
        flex: 1,
        // 修正方向映射：v垂直排列用column，h水平排列用row
        flexDirection: node.align === 'v' ? 'column' : 'row',
        alignItems: 'stretch',
      }}
    >
      {node.componentList.map((child, idx) => (
        <View key={idx} style={{flex: 1}}>
          {renderContainer(child)}
        </View>
      ))}
    </View>
  )
}

// 根节点调用 renderContainer(Container) 即可

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