创建像 github 提交这样的平面列表表的最有效方法

Question

我正在尝试创建一个类似于 github 贡献水平滚动的表格，数据应该按列向下排列。

<ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <FlatList
            data={[...Array(100).keys()]}
            renderItem={({item}) => (
              <SmallHistoryBlock
                
              />
            )}
            scrollEnabled={false}
            numColumns={Math.ceil(100 / 7)}
            contentContainerStyle={{
              justifyContent: 'center',
              paddingHorizontal: 10,
            }}
          />
        </ScrollView>

但是，如果此代码不能被整数整除，它将创建一个新行并添加我不想要的余数。

实现这一点的唯一方法是在另一个平面列表中创建一个平面列表吗？我不想这样做，因为从预成型角度来看，它效率不高。

如有任何帮助，我们将不胜感激！

Answer 1

我想你正在寻找的是这样的：

名单：

const itemsCount = 100;
const numberOfColumns = 7;

const data = [...Array(100)].reduce((dataArray, item, index) => {
  const columnIndex = Math.floor(index/numberOfColumns)

  if(!dataArray[columnIndex]) {
    //Start a new Column
    dataArray[chunkIndex] = []
  }

  dataArray[columnIndex].push(item)

  return dataArray
})

   return(
          <FlatList
            data={[[...Array(Math.ceil(100 / 7)).keys()], ]}
            renderItem={({item}) => (
              <ColumnOfSeven
                items={item}
              />
            )}
          />
         );
}

本栏目：

const rowOfSeven = ({items}) => {
<View>
  {items.map(item => {
    return(
      <View>
        {item.title}
      </View>
    )
  })}
</View>
}

这样做仍然允许您使用 flatList 进行虚拟化，因此您应该拥有更好的性能。