javascript - 如何在React Native中更改特定列的样式？

所以，我一直在做一种矩阵表设计来将可用的座位放在公共(public)汽车上!因此，我遍历2d和3d数组以形成此 View !
这是输出的图片!

如您所见，在此图片中-第一行包含一个大的垂直矩形座椅，然后是三个方形座椅!但是，作为支票的第二行-它跳得很大吗？
发生这种情况的原因是第一个垂直矩形，随着矩形的延伸，第二行开始于此，
但是预期的输出如下:

如何实现这一点，因为我尝试将样式设置为正方形，但是没有发生任何预期的情况!
这是我的布局生成代码!

{seatsMapping.map((z, i) => {
                    return (
                      <View key={i} style={{  }}>
                        {z.map((y, j) => {
                          return (
                            <View style={{ flexDirection: 'row' }} key={j}>
                              {y.reverse().map((seat, p) => {
                                return (
                                  <View
                                    style={{ flex: 1,  }}
                                    key={p}>
                                        {
                                            seat != null &&
                                            <View style={{ flexDirection: 'column' }}>
                                                {this.seatLayoutgeneration(seat)}
                                            </View>
                                        }
                                  </View>
                                );
                              })}
                            </View>
                          );
                        })}
                      </View>
                    );
                  })}

从上面可以看到，我正在循环进入3d数组，所以如果你们需要这些功能，请告诉我将会再次更新!
Check here for Reproduced Snack

最佳答案

答案是“思考专栏”
您正在创建一个数组并将其呈现为行，但无论如何都会以间距问题呈现数据。因此，解决此问题的最佳方法是在列中呈现数据。
在这里，您必须遍历行并首先创建列，然后渲染它们。您可以看到逻辑的内联注释。

  const renderData = (arr) => {
    const columns = [];

    //Go through the items in the row
    for (let i = arr[0].length - 1; i > -1; i--) {
      const column = [];
      //For each column in the row generate the contents
      for (let x = 0; x < arr.length; x++) {
        const seat = arr[x][i];
        const output = (
          <View style={{ flex: 1 }}>
            {seat?.name && seat.length === '2' && seat.width === '1' ? (
              <View
                style={{
                  width: 35,
                  height: 80,
                  borderRadius: 5,
                  borderColor: '#000',
                  backgroundColor: '#000',
                  borderWidth: 1,
                  marginBottom: 10,
                }}></View>
            ) : seat?.name && seat.length === '1' && seat.width === '1' ? (
              <View
                style={{
                  width: 35,
                  height: 35,
                  borderWidth: 1,
                  marginBottom: 10,
                  borderColor: 'red',
                }}></View>
            ) : (
              <View style={{ width: 40 }}></View>
            )}
          </View>
        );
        //Add the content to the column
        column.push(output);
      }
      //Add it to main container
      columns.push(<View>{column}</View>);
    }

    return columns;
  };

  return (
    <View>
      <Text>----- Seating ----</Text>

      {seatsMapping.map((z, i) => {
        return (
          <View key={i}>
            <Text>----- Z Axis Level: {i} ----</Text>
            <View style={{ flexDirection: 'row' }}>{renderData(z)}</View>
          </View>
        );
      })}
    </View>
  );

零食与输出
https://snack.expo.io/@guruparan/77427f
编辑
没有所有这些处理，您可以做到这一点，这是一个简单而直接的方法

export default function App() {
  const page1 = data.seats.filter((x) => x.zIndex == 0);
  const columnCount = 3;
  return (
    <View style={styles.container}>
      {page1.map((item) => (
        <View
          style={{
            width: 35 * item.width,
            height: 35 * item.length,
            backgroundColor: 'red',
            margin: 3,
            position: 'absolute',
            left: (columnCount - item.row) * 40,
            top: item.column * 40,
          }}>
          <Text>{columnCount - item.row + ' ' + item.column}</Text>
        </View>
      ))}
    </View>
  );
}

你可以在这里尝试
https://snack.expo.io/@guruparan/busseat