React-Native FlatList 使用大列表缓慢渲染一些项目

Question

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

我该如何解决这个问题？

<FlatList
ref={ref => this.chatFlatList = ref}
data={this.state.messages1}
showsHorizontalScrollIndicator={false}
onEndReached={ this.onRefresh}
onEndReachedThreshold={0.0001}
inverted
renderItem={this.renderChatList}
keyExtractor={item => item.id}

/>

Answer 1

如果你有一个很大的列表，并且想要流畅地渲染项目，你可以试试这个库： https://github.com/Flipkart/recyclerlistview

这是一个适用于 React Native 和 Web 的高性能列表视图，支持复杂的布局。 演示：https://snack.expo.io/@naqvitalha/rlv-demo