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> 

많은 기압을하지 않는 렌더링 방법은 다음과 같습니다

이 최종 결과가 어떻게 보일지입니다. 이 이슈를 어떻게 시작해야할지 모르겠다. 이미지가 업데이트받을 때 (삽입, 삭제 또는 삭제), React 다시 render 구성 요소를 다시 때문에 가능한

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에 보관해야합니다.

그리고 각 행에 3 개의 열로 렌더링하려면 이미지 배열을 아래의 예처럼 다시 구성해야합니다.

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

이 링크 https://codesandbox.io/s/jly9332lzy 통해 CodeSandbox 내 작업 예를 살펴 보자. CodeSandbox의 예에서

나는 온라인 샌드 박스의 오류를 피하기 위해, Grid에서 div에 li에 ul에와 Col를 구성 요소를 변경합니다. 구성 요소를 Grid, 및 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")); 

를 해결 내 코드입니다 그리고 그것은 지금 모든 것이 작동합니다.