有没有办法更新反应原生ListView数据源,以便它不重置滚动位置?

前端之家收集整理的这篇文章主要介绍了有没有办法更新反应原生ListView数据源,以便它不重置滚动位置?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个获取初始DataSource的ListView.然后,用户可以运行搜索,该搜索将使用新的DataSource更新ListView.不幸的是,当发生这种情况时,滚动位置会重置,这并不理想.

我尝试重用相同的ListView.DataSource对象而不是创建一个新对象,但这给了我相同的结果:

...

dataSource: new ListView.DataSource({
  rowHasChanged: (r1,r2) => r1 !== r2
}),componentWillReceiveProps(nextProps) {
this.setState({
  dataSource: this.dataSource.cloneWithRowsAndSections({...});
}

...

我在dataSource更改后尝试在ListView上使用scrollTo,但这会让应用程序跳转很多……不是很好的体验.是否有ListView设置或更新dataSource的不同方法,以防止滚动位置重置?

ListView有2个粘性标题,顶部标题有2行页面描述和一个呈现3个图像网格的redux容器.第二部分是最多50个组件的列表,这些组件的渲染有点重:正方形图像,一些文本和一些SVG.我当前的方法使用onContentSizeChange强制滚动位置,但这会导致滚动位置跳跃,它看起来很业余.

更新:深入研究ListView的文档和源代码,最终只需渲染ScrollView.我可以使用contentOffset来设置初始滚动位置,但是当ListView DataSource更新时它似乎没有帮助;甚至硬编码contentOffset也无济于事.我也尝试将scrollEnabled设置为false,这确实阻止了用户驱动的滚动,但是当它的DataSource更新时,ListView滚动位置仍然被重置:s

更新2:我做了一些进一步的调试,发现建议的rowHasChange和sectionHeaderHasChanged函数在只渲染需要渲染的行/节头方面做得相当不错.

您可以保存滚动位置,并在将新道具设置为ListView后 – 使scrollTo无动画
原文链接:https://www.f2er.com/react/301013.html

猜你在找的React相关文章