React Native实现飞行棋界面：For循环渲染View异常求助

手动编写3组<View style={styles.RowContainer1}>布局可正常显示飞行棋界面，但使用嵌套for循环实现的代码渲染结果不符合预期，RowContainer1未正常渲染。

手动布局代码 #

<View style={styles.RowContainer1}>
    <View style={styles.WhiteBox}></View>
    <View style={styles.SmallgreenBox}></View>
    <View style={styles.WhiteBox}></View>
    <View style={styles.WhiteBox}></View>
    <View style={styles.WhiteBox}></View>
    <View style={styles.WhiteBox}></View>
</View>

<View style={styles.RowContainer1}>
    <View style={styles.WhiteBox}></View>
    <View style={styles.SmallgreenBox}></View>
    <View style={styles.SmallgreenBox}></View>
    <View style={styles.SmallgreenBox}></View>
    <View style={styles.SmallgreenBox}></View>
    <View style={styles.SmallgreenBox}></View>
</View>

<View style={styles.RowContainer1}>
    <View style={styles.WhiteBox}></View>
    <View style={styles.WhiteBox}></View>
    <View style={styles.SmallRedBox}></View>
    <View style={styles.WhiteBox}></View>
    <View style={styles.WhiteBox}></View>
    <View style={styles.WhiteBox}></View>
</View>

循环实现代码 #

export default function Ludo(props) {
  const blocks = [];

  for (let i = 0; i <= 2; i++) {
    
    for (let k = 0; k <= 6; k++) {
      blocks.push(
        <View style={styles.RowContainer1}>
          <View
            style={
              i == 0
                ? k == 1
                  ? styles.SmallgreenBox
                  : styles.WhiteBox
                : i == 1
                  ? k == 1
                    ? styles.WhiteBox
                    : styles.SmallgreenBox
                  : i == 2
                    ? k == 2
                      ? styles.SmallRedBox
                      : styles.WhiteBox
                    : styles.WhiteBox

            }
          ></View>
        </View>
      )
    }
  }
}

输出情况 #

• 实际输出：每个RowContainer1仅包含1个小方块，且重复渲染了21个RowContainer1（3行×7次循环），布局完全错乱。
• 预期输出：3个RowContainer1，每个容器内包含6个小方块，对应手动布局的样式。

问题原因与修复 #

循环逻辑错误：当前内层循环每次都会生成新的RowContainer1，而非在同一个行容器内添加多个小方块。正确逻辑应为先创建行容器，在内层循环中向容器添加小方块，最后将整行推入数组。

修复后的代码：

export default function Ludo(props) {
  const blocks = [];

  for (let i = 0; i <= 2; i++) {
    // 初始化当前行的子元素数组
    const rowItems = [];
    // 内层循环生成6个小方块（对应手动布局的数量）
    for (let k = 0; k < 6; k++) {
      let boxStyle = styles.WhiteBox;
      if (i === 0 && k === 1) {
        boxStyle = styles.SmallgreenBox;
      } else if (i === 1) {
        boxStyle = k === 0 ? styles.WhiteBox : styles.SmallgreenBox;
      } else if (i === 2 && k === 2) {
        boxStyle = styles.SmallRedBox;
      }
      // 添加key属性满足React列表渲染要求
      rowItems.push(<View style={boxStyle} key={`${i}-${k}`}></View>);
    }
    // 将整行容器推入blocks数组
    blocks.push(<View style={styles.RowContainer1} key={i}>{rowItems}</View>);
  }

  // 返回渲染内容（原代码缺少此步骤）
  return <View>{blocks}</View>;
}

修复要点：

1. 外层循环先创建当前行的子元素数组rowItems
2. 内层循环仅生成小方块并添加到rowItems，避免重复创建行容器
3. 调整内层循环次数为k < 6，匹配手动布局的6个方块数量
4. 简化样式判断逻辑，提升可读性
5. 为列表元素添加key属性，符合React渲染规范
6. 补充组件返回语句，确保渲染内容正常输出

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