具有 100 多个列表项的 React-Native flatlist 的性能问题

Question

我正在尝试使用 RN flatlist 来显示一个大的联系人姓名列表（100 多个项目）。我不断收到以下警告：

VirtualizedList：您有一个更新缓慢的大列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，如 PureComponent、shouldComponentUpdate 等。

每当列表中有超过 50 个项目时，某些动画 UI 项目就会变得非常缓慢，但是一旦我一直向下滚动到列表底部，缓慢就会好很多

我一次性获取所有联系人并将它们存储在 redux 存储中的数组中。我曾尝试使用像 initialNumToRender 这样的道具，但似乎无法提高性能。我可以做些什么来改进我的清单？我以前从未使用过 RN FlatList 所以任何提示将不胜感激

这是我的列表相关代码：

renderRow = ({item}) => {

 return (
  <ListItem
   title={item.firstName}
   chevronColor={colors.tertiary}
  />
 )
}


  <FlatList
   data={this.props.contacts}
   renderItem={this.renderRow}
   keyExtractor={item => item.id}
   initialNumToRender={10}
   removeClippedSubviews={true}
  />

this.props.contacts 是 redux 存储中的联系人对象数组

Answer 1

我最终实现了recyclerlistview并遵循了本教程，该教程解释了如何使其工作，因为缺少文档。它的工作里程比平面列表好。非常快速和流畅。