Question

我正在尝试使用RN扁平列表显示大量联系人姓名列表（超过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

您可以遵循以下代码实现。对于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，并遵循了this tutorial，该文档解释了由于缺少文档而如何使其工作。它的工作里程比固定列表要好。非常快速和流畅。

带有100多个列表项的React-Native平面列表的性能问题

2 个答案: