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

WrapperView将帮助您拉伸块以适应整个区域。从样式的角度来看，您可以使用 flexbox 解决任务：

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

诀窍是我们将每一列视为容器内的一行。使用填充和alignItems样式来实现一致的间距。

现在棘手的部分是dataSource正确处理。这个想法是dataSource在组件状态中有 3 -s。这样，无论何时获取数据，您都必须手动检查它并将其拆分为三个来源。

请注意，onEndReached随附的便利ListView在这里将不可用，因此您必须抓住到达 末尾的用户ScrollView，以便知道何时需要新的提取。但这是一个不同的问题，我相信已经在其他地方得到了回答。

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