在React Native ListView中插入元素

Question

我正在努力在React Native中动态地将View插入ListView组件。最终，我想在这里获得类似Google图片的内容：

我列出了包含ListView和以下样式

的方框

renderListStyle: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap'
    }

因此框显示正确，但现在我需要在行之间动态插入视图。例如，当我单击第四个框时，视图组件将显示在第一行下方。当用户点击8时，会在第二行等

之后显示视图组件

任何想法如何实现它？我检查了ListView的renderSeparator道具但是不能完全得到我需要的东西。也许以前有人有这样的问题？

感谢任何帮助！

Answer 1

您的列表视图是否将每个单独的框渲染为一行？如果您将所有3个框设置为包含所需视图的行，并且如果单击这3个框中的任何一个，它将显示该视图。这是一个粗略的草图，它可能看起来像：

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => (
    <View>
      <Box onPress={this.showView} /> //the 3 boxes will prob be wrapped in 
      <Box onPress={this.showView} /> //another view to set those to 'row' flexDirection
      <Box onPress={this.showView} />
      <YourView show={this.state.show} />
    </View>
  )}
/>