React-Native 平面列表的性能问题

Question

我正在使用React-Native平面列表，我遇到的问题是渲染问题。假设我们必须在平面列表中添加 2000 个项目。

ScrollToIndex(1000) 没有得到结果，因为它不在视口中。

有什么解决方案可以得到结果吗？

Answer 1

最好使用 getItemLayout prop 以获得更好的性能。

getItemLayout 是一个给定两个参数的函数：

data，即列表上显示的数据(它与您传递到列表中的数据道具相同)和索引，即相关行的行的索引。

它应该返回一个包含三个 props 的对象：偏移量，索引索引处从第一行顶部到行顶部的距离;长度，这是行和索引的高度，它只是传递给函数的索引参数。

对于 FlatList，这个函数编写起来相对简单。如果所有行的高度相同，则可以简单地返回 {offset： ROW_HEIGHT * index， length： ROW_HEIGHT， index}。如果它们不是，或者您的行之间有分隔符，它会稍微复杂一些，但您应该返回的内容仍然很明显。

您可以在此处了解更多信息：

https://medium.com/@jsoendermann/sectionlist-and-getitemlayout-2293b0b916fb

https://facebook.github.io/react-native/docs/performance.html#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists

getItemLayout = (data, index) => {
return { length: 200, offset: 200 * index, index };
}

这是一个函数，你可以用作FlatList的getItemLayout道具。 在这个函数中，你对FlatList说你的行高必须是200。 它对性能有好处，因为它不需要计算行的高度。

Answer 2

我已经将scrollToIndex用于一个月中的天数的平面列表，需要在页面渲染时自动滚动到当天。更不用说您的 1000 个项目了，即使是 28 月份的 28 个(天)也无法为我加载。

您可以确保在 FlatList 上设置了 onScrollToIndexFailed，以便它可以使用 scrollToEnd 反复运行 scrollToIndex 函数，直到成功(当列表呈现时)。

另一种方法是使用要滚动到的项目筛选列表，或者减少列表中的项目以减少渲染，除非您确实需要使滚动动画超过 1000 个项目。