React-Native flatlist的性能问题

Question

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

ScrollToIndex（1000）没有得到结果，因为它超出了视口。

是否有任何解决方案可以获得结果？

Answer 1

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

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

数据，即列表中显示的数据（它与您传递到列表中的数据支持相同）和索引，即相关行的行索引。

它应该返回一个带有三个道具的对象：offset，从第一行顶部到索引索引行顶部的距离; length，即行和索引的高度，它只是传递给函数的索引参数。

对于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 prop的函数。在这个函数中你要对FlatList说你的行高度必须是200。 它对性能有好处，因为它不需要计算行的高度。

Answer 2

我已经将scrollToIndex用于一个月内的FlatList，需要自动滚动到页面渲染的当天。不要提及你的1000件物品，即使是2月份的28件物品（天）也无法为我装载。

您可以确保FlatList上的onScrollToIndexFailed已设置，因此它可以重复运行scrollToInnd函数并重复滚动，直到成功（因为列表正在渲染）。

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