使用 React Native 创建平面图答案

【问题标题】：Create a floor plan with React Native使用 React Native 创建平面图
【发布时间】：2018-03-01 22:27:52
【问题描述】：

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

在 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>
  )}
}

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

【问题讨论】：

标签： javascript reactjs svg react-native absolute

【解决方案1】：

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

另一方面，有些座位之间的边距不同，所以我建议您在数据中包含这一点，但边距根据该数据而定。

【讨论】：

【解决方案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>
      );
    }
  }

【讨论】：

【解决方案3】：

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

// 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>

【讨论】：

【解决方案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 应该将行索引保持在一边，并使包含座位的行居中。

【讨论】：