具有 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 这样的道具，但似乎无法提高性能。我可以做些什么来改进我的清单吗？我以前从未使用过 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 store中联系人对象的数组

Answer 1

您可以按照这些代码实现。对于 VIEWABILITY_CONFIG，请遵循此 link

const VIEWABILITY_CONFIG - {
  minimumViewTime: 300,
  viewAreaCoveragePercentThreshold: 100,
  waitForInteraction
}
const yourItemHeight = 108;
class yourClass extends React.PureComponent
...

_getItemLayout(data, index) {
return { lenght: yourItemHeight, offset: yourItemHeight * index, index }
}
 <FlatList
   data={this.props.contacts}
   renderItem={this.renderRow}
   keyExtractor={item => item.id}
   getItemLayout: {this._getItemLayout}
   initialNumToRender={10} // Vary According to your screen size take a lumsum according to your item height
   removeClippedSubviews={true}
   viewabilityConfig={VIEWABILITY_CONFIG}
  />

Answer 2

我最终实现了 recyclerlistview and followed this tutorial，它解释了如何让它工作，因为缺少文档。它的工作里程比平面列表好。非常快速和流畅。

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

performance issues with React-Native flatlist with 100+ list items

react-native

react-native-flatlist