配列内のいくつかの項目を、各行の3列のグリッドにマップしたいと考えています。今はグリッド全体をハードコードしていますが、これを自動的に行うのは簡単なことです。ここでNativeBase:行に列を生成する
<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メソッドは、次のとおりです。
これは、最終結果がどのように見えるかです。私はこの問題についてどのように始めるべきかわかりません。あなたのイメージが更新されますとき(挿入、削除または削除)、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>
);
});
}
ありがとうございます、これは要求されたとおりに動作します – Fullhdpixel
小道具なし。それが私の喜びだった。 –