如何在React

Question

我有一个VideoGridItem组件列表，我希望在网格中呈现这些组件。我正在使用react-native-easy-grid，因此我处理了Grid，Row和Col。

每行应该有2 VideoGridItem个，所以我想每2个包裹Row个组件。

我怎样才能做到这一点？

我的标记实际上看起来有点像：

<Grid>
  <Row>
    <VideoGridItem /> { /* Renders a <Col> */ }
    <VideoGridItem />
  </Row>
  <Row>
    <VideoGridItem />
    <VideoGridItem />
  </Row>
  <Row>
    <VideoGridItem />
    <VideoGridItem />
 </Row>
</Grid>

现在我有

<Grid>
    <VideoGridItem /> { /* Renders a <Col> */ }
    <VideoGridItem />
    <VideoGridItem />
    <VideoGridItem />
    <VideoGridItem />
    <VideoGridItem />
</Grid>

Answer 1

假设您知道基于数组渲染的数量......

const renderedRows = []
for (let i = 0; i < myVidItems.length; i += 2) {
  renderedRows.push(
    <Row>
      {Array(myVidItems[i + 1] ? 2 : 1).fill(<VideoGridItem />)}
    </Row>
  )
}

[...]

<Grid>
  {renderedRows}
</Grid>

我希望有一个更好的方式。

Answer 2

您使用原生基础对定制设计很有用

请参阅以下链接

http://nativebase.io/docs/v0.4.6/components#layout

或使用{/ n}

这是制动线的用途

Answer 3

也许你应该看看flexbox

flexbox可以根据您的屏幕分辨率显示内容。它易于使用： - ）

Answer 4

如果您愿意使用Lodash，您可以

const rows = _.chunk(videoGridItems, 2).map(vgis => <Row>{vgis}</Row>);