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

Question

所以，我一直在制作一种矩阵式的 table 设计来放置公交车上的可用座位!所以，我循环遍历 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

Answer 1

对此的答案是“思考专栏”

您正在创建一个数组并将其呈现为行，这无论如何都会呈现具有间距问题的数据。因此，解决此问题的最佳方法是按列呈现数据。

在这里，您必须先遍历行并创建列，然后再渲染它们。您可以看到逻辑的内联注释。

  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