如何制作一个像 UI 一样的表来反应原生以呈现其中的元素？

Question

我的数组如下：Array [  Array [    "3",    "4",    "9",    "10",    "15",    "16",    "21",    "22",    "27",    "28",    "33",    "34",  ],  Array [    "2",    "5",    "8",    "11",    "14",    "17",    "20",    "23",    "26",    "29",    "32",    "35",  ],  Array [    undefined,    undefined,    undefined,    undefined,    undefined,    undefined,    undefined,    undefined,    undefined,    undefined,    undefined,    "36",  ],  Array [    "1",    "6",    "7",    "12",    "13",    "18",    "19",    "24",    "25",    "30",    "31",    "37",  ],]那么如何像矩阵一样在 React Native 中渲染上述数组呢？例如它有 4 个数组，所以行的长度为 4，每个数组内部大约有 12 个元素，所以有 12 列，所以应该有 4 行和 12 列 - 如何显示这个？我的功能：seats = () => {              let arr2d = this.state.selectedSeatLayouts.reduce((r, {column, row, name }) => {            if (!r[row]) r[row] = [];            r[row][column] = name;            return r;        }, []);                  return (              arr2d.map((o, i) => {                  return(                    <View style={{ flexDirection: 'row' }} key={i}>                    {                        o.map((e, i) =>{                            return(                                <View                                 style={{flex: 1}}                                key={i}>                                    <Text>{e}</Text>                                </View>                            )                        })                    }                    </View>                  )              })          );    }从上面得到的输出如下：349101516212227283334258111417202326and so on...但预期的输出如下，1          2   36          5   47          8   912         11  1013         14  1518         17  1619         20  2124         23  2225         26  2730         29  2831         32  3337   36    35  34请指导和帮助

Answer 1

您可以先使用旋转数组并使用 flex。

    // Rotate array

  const rotateArray = arr2d[0].map((val, index) =>

    arr2d.map(row => row[index])

  );

  return (

    <View>

      {rotateArray.map((o, i) => {

        return (

          <View style={{flexDirection: 'row'}} key={i}>

            {o.reverse().map((e, i) => {

              return (

                <View

                  style={{flex: 1}}

                  key={i}

                >

                  <Text>{e}</Text>

                </View>

              );

            })}

          </View>

        );

      })}

    </View>

  );

Answer 2

return (

  <View style={{ flexDirection: 'column' }}>

    {arr2d.map((o) => {

        return(

          <View style={{ flexDirection: 'row' }} key={o}>

          {

              o.map((e) =>{

                  return(

                      <Text key={e}>{e}</Text>

                  )

              })

          }

          </View>

        )

    })}

  </View>

);