带标签菜单的平面列表

Question

我正在努力实现这样的目标：

数据类似于：根类别 -> 子类别 -> 产品。我们有大约 3000 多种产品。显示所有产品会减慢设备速度（如果我可以做些什么来加快渲染速度，请告诉我），所以我将它们缩减为子类别，每个类别中大约有 5-12 个子类别类别，每个子类别中约有 200 种产品。

编码

列表组件：https : //gist.github.com/Fl4zher/5e6f90d3d10e494d0f19395231f25946

标签栏：https : //gist.github.com/Fl4zher/f42afbbc6a57602d0ed4c682d5ac0a20

我所经历的

• 即使有 200 种产品，该列表也会有点滞后。
• 当我在选项卡菜单上按下子类别时，需要一段时间才能采取行动（大约 1-2 秒）。
• 当我滚动时，标签菜单不能很好地跟进。
• 使用标签菜单几次后，它比以前慢了。

我想要的是

1. 当我从选项卡菜单中按下一个类别时，我希望它滚动到所选的子类别列表。

2. 当我滚动时，我希望标签菜单跟随当前显示的子类别列表。

Answer 1

使用部分列表和react-native-fast-image

旧答案：

1. 我建议你使用带有延迟加载的 Flatlist
2. 请添加分页，加载 50 个项目，当滚动结束时加载下一个 50 个项目。即使您一次获取所有 3000 个项目，也一次渲染 50-100 个项目。
3. 对于图像使用react-native-fast-image

不要一次渲染所有 3000 个项目，这是不必要的，因为用户可能无法滚动整个列表。