优化React Native中的FlatList实现GitHub贡献表

在React Native开发中，如何高效地实现类似GitHub贡献表的水平滚动列表是一个常见的问题。特别是当我们需要数据按列向下排列，并且希望避免在行尾出现余数时，事情会变得稍微复杂一些。今天我们就来探讨如何优化FlatList的使用，避免性能问题，并确保数据的精确排列。问题描述假设我们有一个包含100个数据项的数组，我们希望将这些数据以7列的形式展示，每列有最多14个数据项。如果数据项数量不能被7整除，我们不希望在最后一行出现余数，而是希望保持每列数据的完整性。初始方案最初的代码尝试将FlatList包裹在ScrollView中，并设置numColumns属性来控制列数。但是这种方法有以下问题：性能问题：FlatList在ScrollView中会失去其虚拟化渲染的优势，导致所有项都渲染，影响性能。余数问题：如果数据项不能被列数整除，最后一行会出现余数，破坏视觉效果。优化方案基于Dustin Forsyth的建议，我们可以采用以下优化方案：constitemsCount