React-native 创建高性能网格

Question

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

Grid that i want

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

目前我使用 react-native 中的简单“视图”组件，左侧和顶部有边框。 当我点击顶部的日期时，重新渲染大约需要 0.5 - 1 秒（取决于细胞数）。 有没有更高效的方法来制作这样的网格？

谢谢！

Answer 1

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

我相信这两个元素都可以进行垂直或水平滚动，但我认为它们不能同时进行。对此并不乐观。

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

此外，您还可以研究 React 的许多性能增强功能：

• React 16 可能对您来说更快，因为它具有新的差异引擎并允许在渲染引擎中进行优先级排序。
• 您可以尝试创建自定义shouldComponentUpdate 函数。
• 我还看到人们声称通过不将重复组件（网格中的单元格）放在类中而是使用纯函数来提高性能。很遗憾，我现在无法打开博文
• 等

Answer 2

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