我正在尝试使用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存储中的联系人对象数组
答案 0 :(得分:0)
您可以遵循以下代码实现。 对于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}
/>
答案 1 :(得分:0)
我最终实现了recyclerlistview,并遵循了this tutorial,该文档解释了由于缺少文档而如何使其工作。它的工作里程比固定列表要好。非常快速和流畅。