具有不同高度项目的网格布局（React Native）

Question

任何关于实现如下图像的网格布局的想法。

Answer 1

答案取决于您要显示的数据。我想这是一个无限列表，它向下滚动加载更多的项目。如果是这样的话，你需要把3 ListView -s内ScrollView

的标记看起来像这样：

<View style={styles.wrapper}> 
 
    <ScrollView contentContainerStyle={styles.container}> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn1} 
 
     /> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn2} 
 
     /> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn3} 
 
     /> 
 
    </ScrollView> 
 
</View>

包装View会帮助你伸展块，以适应整个地区。但从造型点，你可以用Flexbox的解决任务：

wrapper: { 
 
    flex: 1 
 
}, 
 
container: { 
 
    flexDirection: 'row', 
 
    paddingHorizontal: 5 
 
}, 
 
list: { 
 
    flex: 1, 
 
    flexDirection: 'column', 
 
    paddingVertical: 10, 
 
    paddingHorizontal: 5 
 
}

诀窍是，我们对待每一个列在容器内一排。玩填充和alignItems造型，以实现一致的间距。

现在棘手的部分是妥善处理dataSource。这个想法是在组件状态下有3个dataSource-s。通过这种方式，每当数据被提取时，您都必须手动将其分解为三个来源。

注意随附ListView得心应手onEndReached将不可用在这里，所以你必须抓住用户到达ScrollView结束，以便在需要的时候取的新认识。但这是另一个我认为已经在其他地方得到回答的问题。

如果网格是有限的，你不需要投入更多的项目，事情更简单。只需按照上述方式拆分数据，并使用嵌套项目而不是ListView -s即可使用3 View -s。其原因在于ListView提供了一种设置rowHasChanged条件的方法，该条件通过永不呈现未更改的列表项目来提高性能。如果名单是有限的，你并不需要那么做。