具有不同高度项目的网格布局(React Native) [英] Grid layout with different height items (React Native)

问题描述

实现网格布局的任何想法，如下图所示.

Any idea for implementing a grid layout like the following image.

推荐答案

答案取决于您要显示的数据.我猜这是一个无限的列表，向下滚动会加载更多项目.如果是这种情况，您需要在 ScrollView

The answer depends on the data you are going to display. I guess this is an infinite list which loads more items on scroll down. If that's the case you need to put 3 ListView-s inside a 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 View will help you stretch the block to fit the entire area. From the styling point of view you can resolve the task with flexbox:

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

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

The trick is that we treat every column as a row inside the container. Play around with paddings and alignItems styling to achieve consistent spacing.

现在最棘手的部分是正确处理 dataSource .这个想法是在组件状态下有3个 dataSource -s.这样，无论何时提取数据，都必须手动进行遍历并将其分为三个来源.

Now the tricky part is to handle the dataSource properly. The idea is to have 3 dataSource-s in the component state. This way whenever the data has been fetched, you'll have to go over it manually and split into three sources.

请注意， ListView 附带的方便的 onEndReached 在这里不可用，因此您必须抓住到达 ScrollView ，以了解何时需要进行新的提取.但这是一个不同的问题，我相信已经在其他地方得到了回答.

Note that the handy onEndReached that comes with the ListView won't be available here, so you'll have to catch the user reaching the end of the ScrollView in order to know when new fetch is required. But that's a different question which I believe has already been answered elsewhere.

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

In case the grid is finite and you don't need to throw more items into it, things are simpler. Just split the data the way described above and use 3 View-s with nested items instead of the ListView-s. The reasoning behind that is that ListView comes with a way to set a rowHasChanged condition, which improves performance by never rendering the unchanged list items. You don't really need that if the list is finite.

这篇关于具有不同高度项目的网格布局(React Native)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！