如何制作一个像 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>

                  )

              })

          );

    }

从上面得到的输出如下：

3

4

9

10

15

16

21

22

27

28

33

34

2

5

8

11

14

17

20

23

26

and so on...

但预期的输出如下，

1          2   3

6          5   4

7          8   9

12         11  10

13         14  15

18         17  16

19         20  21

24         23  22

25         26  27

30         29  28

31         32  33

37   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>);