NativeBase：在行中生成列

Question

我想将数组中的多个项映射到每行3列的网格。现在我将整个网格硬编码，但自动执行此操作应该是微不足道的。

这是最终结果应该是这样的：

<Grid>  
  <Col> 
    <Row>Cel 1</Row>
    <Row>Cel 2</Row>
    <Row>Cel 3</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>          
</Grid>

这是render方法，它没有做太多的atm。我不知道如何开始这个问题。

render() {
    let images = [
      Images.grid1,
      Images.grid2,
      Images.grid3,
      Images.grid4,
      Images.grid5,
      Images.grid6,
      Images.grid7,
      Images.grid8,
      Images.grid9
    ];

return images.map(link => {
    return (
      <Grid>
       <Row>
        <Col>link</Col>
        <Col>link</Col>
        <Col>link</Col>
       </Row>
       <Row>
        <Col>link</Col>
        <Col>link</Col>
        <Col>link</Col>
       </Row>
      </Grid> 
      );
   });
}

Answer 1

您的图像数组应尽可能存储在state或props中，因为当您的图像得到更新（插入，删除或删除）时，React将再次重新组合您的组件。

并且您的Images数组应该重新构造为下面的示例，以便在每行中使用三列进行渲染。

render

通过此链接

gridArray = [
    [image1, image2, image3],
    [image4, image5, image6],
    [image7, image8, image9],
];

查看我在CodeSandbox上的工作示例。

在CodeSandbox的示例中，我将组件从https://codesandbox.io/s/jly9332lzy更改为Grid，将div更改为Row，将ul更改为Col，以避免在线沙箱中出现错误。您只需将组件更改为li，Grid和Row，编辑代码以适应您的代码，一切都会正常工作。

以下是我的代码，可以解决您的问题

Col

就是这样，现在一切都会奏效。