使 VirtualizedList 显示为 Grid

Question

我正在尝试制作这样的东西：

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

我已经尝试在单元格和视图包装器中添加 style 道具，但是 none 用于对齐单元格的代码（如我发布的图片）被忽略了。事实上，当我使用 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>

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

使 VirtualizedList 显示为 Grid

Make VirtualizedList show as Grid

react-native

react-native-flatlist

react-native-sectionlist