Блог

Итак, я делал дизайн таблицы в виде матрицы, чтобы разместить свободные места в автобусе! Итак, я перебираю 2d и 3d массивы, чтобы создать это представление!

Вот изображение вывода!

На этом рисунке, как вы видите, первая строка содержит сначала большое вертикальное прямоугольное место, а затем три квадратных места! Но, как проверить вторую строку — она подскочила с огромным разрывом?

Поскольку это происходит из-за первого вертикального прямоугольника, поскольку прямоугольник немного расширяется — после этого начинаются вторые строки,

Но ожидаемый результат выглядит следующим образом:

Как это реализовать, поскольку я пытался стилизовать под квадраты, но ничего не происходит, как ожидалось!

Вот мой код для генерации макета!

 {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 amp;amp;  
                                            <View style={{ flexDirection: 'column' }}>
                                                {this.seatLayoutgeneration(seat)}
                                            </View>
                                        }
                                  </View>
                                );
                              })}
                            </View>
                          );
                        })}
                      </View>
                    );
                  })}
  

Как видно из вышесказанного, вы можете видеть, что я зацикливаюсь на 3D-массиве, поэтому, если вам, ребята, нужны эти функции, дайте мне знать, обновится снова!

Проверьте здесь, чтобы воспроизвести закуску

Ответом на это будет «Подумайте о столбцах»

Вы создаете массив и отображаете его в виде строк, которые в любом случае отображают данные с учетом возникшей у вас проблемы с интервалом. Таким образом, лучшим способом решения этой проблемы было бы отображение данных в столбцах.

Здесь вам нужно сначала перебирать строки и создавать столбцы, а затем отображать их. Вы можете увидеть встроенные комментарии к логике.

   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 amp;amp; seat.length === '2' amp;amp; seat.width === '1' ? (
              <View
                style={{
                  width: 35,
                  height: 80,
                  borderRadius: 5,
                  borderColor: '#000',
                  backgroundColor: '#000',
                  borderWidth: 1,
                  marginBottom: 10,
                }}></View>
            ) : seat?.name amp;amp; seat.length === '1' amp;amp; 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