react-native - 有没有一种方法可以在本地更新 native ListView数据源,从而不会重置滚动位置?

标签 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({...});
}

...

更改数据源后,我尝试在ListView上使用scrollTo,但是这种情况下该应用程序跳跃了很多……不是很好的体验。是否有ListView设置或更新dataSource的其他方法来阻止滚动位置的重置?

ListView有2个粘性 header ,顶部 header 有​​2行页面描述和一个redux容器,可渲染3个图像网格。第二部分列出了多达50个要渲染的组件:正方形图像,一些文本和一些SVG。我当前的方法使用onContentSizeChange强制滚动位置,但是这会导致滚动位置跳动,并且看起来是业余的。

更新:深入到ListView的文档和源代码中,它最终仅呈现了ScrollView。我可以使用 contentOffset 来设置初始滚动位置,但是当ListView DataSource更新时,它似乎无济于事。甚至硬编码contentOffset也无济于事。我还尝试将 scrollEnabled 设置为false,这确实阻止了用户驱动的滚动,但是在更新DataSource时,ListView滚动位置仍然被重置:

更新2:我进行了一些进一步的调试,发现建议的rowHasChange和sectionHeaderHasChanged函数仅呈现需要渲染的行/节头就可以很好地完成工作。

最佳答案

您可以保存滚动位置,并在将新 Prop 设置为ListView之后—使scrollTo不含动画

关于react-native - 有没有一种方法可以在本地更新 native ListView数据源,从而不会重置滚动位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40368269/

相关文章:

android - 这个图标叫什么( react native 矢量图标)

ios - React-native-maps lite 模式不适用于 Ios 模拟器

javascript - 在页面渲染react-native hooks之前从api获取数据

javascript - 更改 React Native 中其他组件的状态

react-native - 如何在 react-native 中显示 ListView,其中登录用户的等级应该始终可见

ios - 构建发布React Native时应用程序iOS卡在空白屏幕上

android - 如何使用 React Native VirtualizedList 遍历数据对象?

react-native - 如何处理 ListView 排序性能?

android - 如何在 React Native 的 Listview 中单行渲染一个部分的项目?

reactjs - Flatlist onEndReached 无限循环