使 VirtualizedList 显示为 Grid

Posted 2023-02-16

【中文标题】使 VirtualizedList 显示为 Grid

【英文标题】：Make VirtualizedList show as Grid

【发布时间】：2018-10-29 09:50:48

【问题描述】：

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

问题：该项目是用immutablejs 和according to React Native Docs 构建的，我不能使用FlatList，因此我不能使用该组件的numColumns props 功能。 AFAIK，我唯一的选择是使用文档指出的 VirtualizedList，但我不知道如何将单元格显示为网格，如上所示。

我已经尝试在单元格和视图包装器中添加 style 道具，但是没有任何用于对齐单元格的代码（如我发布的图片）被忽略。事实上，当我使用 ScrollView 时，它显示完美，但由于巨大的延迟，我将代码移动到 VirtualizedList。

有什么帮助吗？任何事情都会受到欢迎，我已经在 Google 上挖掘了很多内容，但我找不到关于此的任何内容。

一些示例代码：

      <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>

【问题讨论】：

看看FlatList's code 并尝试弄清楚他们是如何实现numColumns 属性的。我不知道您如何实现它，但我想这是一个开始。

我现在正在尝试这样做，但代码不是很清楚。我希望有一个已知的解决方案。

稍微看一眼，我可以看到最重要的两个部分是getItem，它允许每行渲染超过 1 个项目，renderItem，它设置 flex 方向。

感谢您的指出，由于广泛的研究，我不得不冷静下来。我去看看

【参考方案1】：

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

<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 中，并在renderItem 中添加flexDirection: 'row' View 组件。