我有一个获取初始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