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

时间:2016-11-01 20:39:28

标签: react-native react-native-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设置或更新数据源的不同方法会阻止滚动位置重置?

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

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

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

2 个答案:

答案 0 :(得分:0)

您可以保存滚动位置,并在将新道具设置为ListView后 - 使scrollTo不带动画

答案 1 :(得分:0)

在你的情况下,我要做的是显示一种带有加载微调器的叠加以隐藏弹跳效果,然后在滚动设置后隐藏叠加,不知道如何实现它,因为我是RN很新,但肯定是可能的