使用地图功能的表格答案

【问题标题】：A table using map function使用地图功能的表格
【发布时间】：2021-02-26 00:19:43
【问题描述】：

我想从两个给定的数组中创建一个 2 x 2 的表。该表应如下所示：

我必须使用 ES6 中的“地图”功能。我的代码如下所示。

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

const array1 = ['1','2'];
const array2 = ['X','Y']
class Table extends Component{

render() {
  return (
    <View style={{borderStyle : 'solid',justifyContent : 'center' }}>
   {array1.map((arr1) => (
    <View>
      {array2.map((arr2) => (
      <View>
      <Text>
        {arr2} {arr1}   
       </Text>  
      </View>
    ))}
    </View>
  )) 
}
  </View>
);
 }
}

export default Table;

此时我得到的输出类似于 - X1 X2 Y1 Y2

我需要使用 flex。我该怎么办？

【问题讨论】：

为什么要弯曲？看看网格布局吧。
我需要使用 flex，它用于一个项目
OP需要使用flex，因为react-native只支持flex布局
如果结果位置固定为奇偶数，如何在数组上生成并排序

标签： javascript css ecmascript-6 flexbox

【解决方案1】：

你快到了。您只需要确保最后一级视图是 flex 并且具有“行”的方向。

  return (
    <View style={{ borderStyle: 'solid', justifyContent: 'center' }}>
      {array1.map((arr1) => (
        <View style={{flexDirection: 'row'}}> {/* This is the main line you need to change */}
          {array2.map((arr2) => (
            <View style={{padding: 5, borderColor: 'black', borderWidth: 1}}>
              <Text style={{color: 'red'}}>
                {arr2}{arr1}
              </Text>
            </View>
          ))}
        </View>
      ))}
    </View>
  );

您可以查看一个工作零食示例here。

【讨论】：