使 VirtualizedList 显示为网格 [英] Make VirtualizedList show as Grid

问题描述

我正在尝试做这样的事情:

I'm trying to make something like this:

问题:该项目是用 immutablejs 和 根据 React Native Docs，我不能使用 FlatList 因此我不能使用该组件的 numColumns props 功能.AFAIK，我唯一的选择是使用 VirtualizedList 作为文档指出，但我无法弄清楚如何将单元格显示为如上所示的网格.

The problem: The project was built with immutablejs and according to React Native Docs, I can't use FlatList thus I can't use numColumns props feature of that component. AFAIK, my only choice is to use VirtualizedList as the docs points out, but I can't figure out how to display the cells as a grid as shown above.

我已经尝试在单元格和视图包装器中添加 style 道具，但是没有任何用于对齐单元格的代码(如我发布的图片)被忽略.事实上，当我使用 ScrollView 时它表现得很完美，但由于巨大的滞后，我将代码移动到 VirtualizedList.

I've already tried to add style props in both cell and view wrapper, but none of the code used to align the cells, like the picture I posted, is ignored. In fact it was showing perfect when I was using ScrollView, but due the HUGE lag I'm moving the code to VirtualizedList.

有什么帮助吗?任何东西都欢迎，我已经在 Google 上挖掘了很多东西，但我找不到关于此的任何内容.

Any help? Anything would be welcome, I already digged a lot on Google but I can't find anything about this.

一些示例代码:

      <View>
        <VirtualizedList
          data={props.schedules}
          getItem={(data, index) => data.get(index)}
          getItemCount={(data) => data.size}
          keyExtractor={(item, index) => index.toString()}
          CellRendererComponent={({children, item}) => {
            return (
              <View style={{any flexbox code gets ignored here}}>
                {children}
              </View>
            )}}
          renderItem={({ item, index }) => (
            <Text style={{also here}} key={index}>{item.get('schedule')}</Text>
          )}
        />
      </View>

推荐答案

回答我自己的问题:我通过从 react-native 存储库复制 FlatList.js 源代码使其工作.这是一个示例代码:

Answering my own question: I got it working by copying the FlatList.js source code from react-native repo. Here's an example code:

<VirtualizedList
  data={props.schedules}
  getItem={(data, index) => {
    let items = []
    for (let i = 0; i < 4; i++) {
      const item = data.get(index * 4 + i)
      item && items.push(item)
    }
    return items
  }}
  getItemCount={(data) => data.size}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item, index}) => {
    return (
      <View key={index} style={{flexDirection: 'row'}}>
        {item.map((elem, i) => (
          <View key={i}>
            <Text key={i}>{elem.get('horario')}</Text>
          </View>
        ))}
      </View>
    )
  }}
/>

数字 4 用于列数.关键部分在 getItem 中，并在 View 组件的 renderItem 处添加 flexDirection: 'row'.

The number 4 is for the number of columns. The key parts are in the getItem and adding flexDirection: 'row' at renderItem in the View component.

这篇关于使 VirtualizedList 显示为网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！