具有不同高度项目的网格布局（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。这样，无论何时获取数据，您都必须手动检查并分成三个来源。

请注意，onEndReached附带的方便ListView将无法在此处使用，因此您必须抓住用户到达ScrollView的末尾才能知道什么时候需要新的提取。但这是一个不同的问题，我相信已在其他地方得到解答。

如果网格是有限的并且您不需要向其中投入更多项目，则事情会更简单。只需按照上述方式拆分数据，并使用3 View - s与嵌套项而不是ListView - s。其背后的原因是ListView提供了一种设置rowHasChanged条件的方法，它通过永不呈现未更改的列表项来提高性能。如果列表是有限的，你真的不需要它。