使用React Native创建平面图

Question

我怎样才能做出类似的东西

在React Native？

我已经尝试过简单的方法flexDirection: row,然后<View>针对每一行进行操作.

但我需要定义每一行中的座位数,并更改每一行的水平位置.但是,某些行的水平位置没有差异,所以我实际上必须定义行是否水平移动一点.

我想可以完成

const rows = [
  { numSeats: 10, shifted: true },
  { numSeats: 11, shifted: false },
  { numSeats: 7, shifted: true },
  { numSeats: 10, shifted: true },
]

然后遍历所有行

<View>
  {rows.map((row, i) => (
    <View style={{ flexDirection: 'row' }}>
      {Array(row.numSeats).fill(null).map(_ => (
        <View style={{ width: 20, height: 20 }} />
      )}
    </View>
  )}
}

但我不知道这是否是一种聪明的方式,也不知道如何相对于其他行移动座位.

Answer 1

也许您可以考虑使用 ，而不是移动所有行justifyContent: center。由于座位数量 - 我假设 - 是已知的，因此您可以为每排创建固定大小的盒子，并且居中将使它们根据需要对齐。

另一方面，有些座位之间有不同的边距，因此我建议您将其包含在数据中，但根据该数据进行边距。