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

Question

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

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

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

我一次性获取所有联系人并将它们存储在 redux 存储中的数组中。我曾尝试使用像 initialNumToRender 这样的 Prop ，但似乎无法提高性能。我可以做些什么来改进我的 list ？我以前从未使用过 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并关注 this tutorial这解释了如何让它工作，因为缺少文档。它的工作里程比平面列表好。非常快速和流畅。