Javascript 在react native应用程序中动态填充网格内的行和列

我正在开发一个react原生应用程序，我想用服务器的输入动态填充我的网格布局，我希望结果是这样的：

 <Grid>
        <Row>
          <Col
            style={{ backgroundColor: colors.dark_orange, height: h(30) }}
          >
          </Col>
          <Col
            style={{ backgroundColor: colors.green, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.gris, height: h(30) }}
          ></Col>
        </Row>
        <Row>
          <Col
            style={{ backgroundColor: colors.orange, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.purple, height: h(30) }}
          ></Col>
          <Col style={{ backgroundColor: colors.red, height: h(30) }}></Col>
        </Row>
        <Row>
          <Col
            style={{ backgroundColor: colors.transparent, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.white, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.green, height: h(30) }}
          ></Col>
        </Row>
        <Row>
          <Col
            style={{ backgroundColor: colors.dark_orange, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.green, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.gris, height: h(30) }}
          ></Col>
        </Row>
        <Row>
          <Col
            style={{ backgroundColor: colors.transparent, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.white, height: h(30) }}
          ></Col>
          <Col
            style={{ backgroundColor: colors.green, height: h(30) }}
          ></Col>
        </Row>
      </Grid>
    </ScrollView>
  </View>

---

正如您所见，我对输入和网格的形状进行了硬编码（每行有3列），我想创建一个函数，从服务器获取所有输入，并呈现类似于我硬编码的内容。

首先，您需要获得数据的形状以反映网格：

// Outer array represents rows, inner array represents columns
const grid = [
  [
    { backgroundColor: colors.dark_orange, height: h(30) },
    ...
  ], [
    ...
  ]
]

然后，只需使用类似的方法对数据进行迭代并返回相关的JSX：

const renderRow = (row) => {
  return <Row>{row.map(renderCol)}</Row>;
}

const renderCol = (col) => {
  const { backgroundColor, height } = col;
  return <Col style={{ backgroundColor, height }}></Col>;
};

<Grid>{grid.map(renderRow)}</Grid>

const renderRow=（行）=>{
返回{row.map（renderCol）}；
}
常量renderCol=（列）=>{
常数{backgroundColor，height}=col；
返回；
};
{grid.map（renderRow）}