使VirtualizedList显示为网格

时间:2018-05-18 22:33:22

标签: react-native react-native-flatlist react-native-sectionlist

我试图做这样的事情:

Gird View

问题:该项目是使用immutablejsaccording to React Native Docs构建的,我无法使用FlatList,因此我无法使用该组件的numColumns道具功能。 AFAIK,我唯一的选择是使用VirtualizedList作为文档指出,但我无法弄清楚如何将单元格显示为如上所示的网格。

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

有任何帮助吗?任何事情都会受到欢迎,我已经在谷歌上挖掘了很多,但我找不到任何这个。

一些示例代码:

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

1 个答案:

答案 0 :(得分: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,并在flexDirection: 'row'组件renderItem处添加View