将数组渲染为矩阵（每行n个项目）

Question

我有一个视图，里面有一个地图功能：

<View style={{width: 500, height: 500}}>
      {[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map((x,i) => {
            return(
                   <View style={{width: 50, height: 50, backgroundColor: 'red'}}></View>
            )
      })} 
</View>

如何将其映射为模式？好像连续5个？

Answer 1

您可以使用flexbox和flexWrap实现此目的，请参见下面的示例 <View style={{display: "flex"; flexDirection: "row", flexWrap: "wrap", flex: 1;}}> </View>

您可以阅读本文档以实现此目的 https://reactnative.dev/docs/flexbox

Answer 2

您可以将源数组拆分为所需长度的块（行），并使用嵌套的.map()循环来渲染其中的行和单元格：

const chunkArr = (arr, size) => 
   arr.reduceRight((r,i,_,s) => (r.push(s.splice(0,size)),r),[])

以下是该概念的完整实时演示：

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const cellData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]      
      
const Matrix = ({cells}) => {
  const rows = cells.reduceRight((r,i,_,s) => (r.push(s.splice(0,5)),r),[])
  return (
    <div className="wrapper">
      {
        rows.map((row,i) => (
          <div key={i} className="row">
            {
              row.map((cell,j) => (
                <div key={j}  className="cell">
                  {cell}
                </div>
              ))
            }
          </div>
        ))
      }
    </div>
  )
}

render (
  <Matrix cells={cellData} />,
  rootNode
)

.wrapper {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.cell {
  width: 20px;
  height: 20px;
  margin: 5px;
  background-color: red;
  color: #fff;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>