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 将重新render 又是你的组件。

并且您的图像数组应该重新构造为下面的示例，以便在每行中呈现三列。

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

通过这个 link https://codesandbox.io/s/jly9332lzy.

查看我在 CodeSandbox 上的工作示例

在 CodeSandbox 的示例中，我将组件从 Grid 更改为 div，将 Row 更改为 ul，将 Col 更改为 li以避免在线沙盒上的错误。您只需将组件更改为 Grid、Row 和 Col，稍微编辑代码以适应您的代码，一切都会正常。

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

import React from "react";
import { render } from "react-dom";

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // Your source data
    this.state = {
      images: [
        "Image 1",
        "Image 2",
        "Image 3",
        "Image 4",
        "Image 5",
        "Image 6",
        "Image 7",
        "Image 8",
        "Image 9",
      ]
    };
  }

  // this method will return structured array like this.
  // gridArray = [
  //    [image1, image2, image3],
  //    [image4, image5, image6],
  //    [image7, image8, image9],
  // ];
  imagesArrayToGridArray(totalColumns) {
    let gridArray = [[]];

    let countColumns = 1;
    for (var i = 0; i < this.state.images.length; i++) {
      gridArray[gridArray.length - 1].push(this.state.images[i]);
      if (countColumns <= totalColumns) {
        countColumns++;
      }
      if (countColumns > totalColumns && i !== this.state.images.length - 1) {
        countColumns = 1;
        gridArray.push([]);
      }
    }

    return gridArray;
  }

  // return React Components like
  // <Row>
  //   <Col>Image 1</Col>
  //   <Col>Image 2</Col>
  //   <Col>Image 3</Col>
  // </Row>
  // <Row>
  //   <Col>Image 4</Col>
  //   <Col>Image 5</Col>
  //   <Col>Image 6</Col>
  // </Row>
  // <Row>
  //   <Col>Image 7</Col>
  //   <Col>Image 8</Col>
  //   <Col>Image 9</Col>
  // </Row>
  renderGrid(gridArray) {
    return gridArray.map(row => (
      <Row>{row.map(col => (<Col>{col}</Col>))}</Row>
    ));
  }

  // render
  render() {
    let gridArray = this.imagesArrayToGridArray(3);
    return <Grid>{this.renderGrid(gridArray)}</Grid>;
  }
}

render(<YourComponent />, document.getElementById("root"));

就是这样，现在一切正常。

NativeBase：在行中生成列

NativeBase: Generate Columns in Row

reactjs

react-native

native-base