React-native创建一个高性能网格

Question

在我的应用程序中，我需要像截图一样创建一个网格：

Grid that i want

单元格宽度和计数取决于顶部的选定日期。 每个单元格都应该处理触摸（在左侧传递时间戳和数字）。

目前我使用简单的＆＃34; View＆＃34;反应原生的组件与左侧和顶部的边界。 当我点击日期时，需要大约0.5 - 1秒（取决于细胞计数）才能重新渲染。 是否有更高效的方式来制作这样的网格？

谢谢！

Answer 1

创建高性能网格和重复数据块的推荐方法是ListView或FlatList组件。我对FlatList没有任何经验，因为它很新，但ListView有优化功能，只需渲染当前屏幕上的元素即可帮助渲染。

我相信这两个元素都可以进行垂直或水平滚动，但我不认为他们可以同时做这两件事。对此并不积极。

如果需要水平和垂直滚动，则可能需要将列表组件包装在滚动视图中。基本上，您可以根据需要将列表设置为尽可能宽，即使它比屏幕大。列表本身处理垂直滚动，滚动视图处理水平滚动（反之亦然，如果它比它更高）。

此外，您可以查看React的许多性能增强功能：

• React 16对您来说可能更快，因为它有一个新的差异引擎并允许在渲染引擎中进行优先级排序。
• 您可以尝试创建自定义shouldComponentUpdate功能。
• 我也看到人们声称性能增强是因为没有将重复的组件（网格中的单元格）放在类中，而是使用纯函数代替。不幸的是，我现在无法发布博客文章
• 等

Answer 2

实现网格的最佳方法是使用FlatList组件，建议使用此组件（请参阅here）。您可以使用numColumns和columnWrapperStyle属性并将它们应用于变量以动态设置网格样式。 FlatList易于使用，您可以看到一个很棒的文档和有用的示例here。