gridview - 具有不同高度项目的网格布局(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>

Wrapper View 将帮助您拉伸(stretch) block 以适合整个区域。从样式的角度来看，您可以使用 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 以便知道何时需要新的提取。但这是一个不同的问题，我相信已经在其他地方得到了回答。

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