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。由于座位的数量 - 我认为 - 已知您可以为每一行创建固定大小的盒子，并且居中可以根据需要对齐它们。

另一方面，一些座位之间有不同的边距，因此我建议您根据该数据在数据和边距中使用它。

Answer 2

此处我justifyContent: 'center' and alignItems: 'center' to view将项目置于中心位置。

import React, { Component } from 'react';
import { View } from 'react-native';

export default class App extends Component {
  render() {
      const rows = [
      { numSeats: 10, shifted: true },
      { numSeats: 11, shifted: false },
      { numSeats: 7, shifted: true },
      { numSeats: 10, shifted: true },
    ];
    return (
      <View style={{ padding: 50 }}>
          {rows.map((row) => {
              return (
                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                    {Array(row.numSeats).fill(null).map(() => {
                        return <View style={{ width: 20, height: 20, backgroundColor: 'orange', margin: 5 }} />;
                    }
                )}
            </View>     
         );
          })
         }
      </View>
      );
    }
  }

Answer 3

考虑一下：你没有唯一的布局工作，不同的座位将填充不同的颜色，你如何处理这个？你真的要指出哪一个座位在哪个行“VIP”，哪个座位在哪一排是“有序”，哪个行是“正常”（或任何其他分类），所以这个平面图将是一个二维数组映射。像这样：

// 1:ordered 2:VIP 3:normal 4:unreal(for 15th row gaps)
const seatMap = [
  [2,2,2,2,2,2,2,1,1,1,1,1,2,2,2,2,2,2,2], // 1st row
  [2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,2,2,2], // 2st row
  ...,
  [3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3], // 15th
  [3,3,3,3,3,2,3,3,3,3,3,3,3,3,2,3,3,3,3,3], // 16th
  [3,3,3,3,3,2,3,3,3,3,3,3,3,3,3,2,3,3,3,3,3]  // 17th
]

render(){
  return (
    <View>
      {
        seatMap.map(
          (row,rowIndex) => <View>
            {
              row.map(
                (type,colIndex)=><SeatBlock 
                                    type={ type } 
                                    row={ rowIndex } 
                                    col={ colIndex }/>
              )
            }
          </View>
        )
      }
    </View>
  )
}

注意类型4，它不是真正的'座位类型'，它是一个间隙，我们将它渲染为间隙而不是座位，你可以定义5或6更大或更小的间隙单位。它是灵活的。

您可以查看以下完整代码。

<div data-snack-id="rJnoL_Xn-" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="dark" style="overflow:hidden;background:#212733;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

Answer 4

你可以使用类似的方法：

seatsPerRow.map((numSeats, index) => {
  return (
    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
      <Text>{index}</Text>
      <View style={{flexDirection: 'row'}}>
      {
        Array(numSeats).fill(null).map(_ => {
         return <SeatSquare />
        })            
      }     
      </View>
      <Text>{index}</Text>
    </View>  
  )
});

基本上，将justifyContent设置为space-between应该将行索引保持在侧面并使包含座位的行居中。

使用React Native创建平面图

4 个答案: