如何在 ScrollView 或 ListView 上保持位置？答案

【问题标题】：How can I keep position on ScrollView or ListView?如何在 ScrollView 或 ListView 上保持位置？
【发布时间】：2016-12-21 19:57:27
【问题描述】：

当你在你的 ReactNative 应用中使用 ScrollView 或 ListView 并且有一些新数据进来时，它们的默认行为是保持在 Scroll 组件中的位置。这意味着如果在 ScrollView 的中间有高度 20 的新数据进来，屏幕上的项目会滑动 20，有时它会离开屏幕。

有没有办法保持/跟踪位置？例如，如果有新的高度为 20 的数据进来，则 position 会自动将位置调整 20，以使当前屏幕上的项目保持在屏幕上。提前致谢。

【问题讨论】：

这可能会帮助你stackoverflow.com/a/36803008/3790046
@HenrikR 是的，这绝对是一种替代方法，但它调用 onContentSizeChange 中的位置更改，这意味着它会在内容大小已经更改后调整位置，然后会更改位置，所以它是会遇到糟糕的用户体验。

标签： react-native react-native-listview react-native-scrollview

【解决方案1】：

我有一个可行的解决方案，虽然它不是很顺利，但它可以完成工作：

handleScroll = (event) => {
  this.scroll = event.nativeEvent.contentOffset.y
  if (this.ready && this.scroll < SCROLL_TRIGGER) {
    // load more stuff here
  }
}

handleSize = (width, height) => {
  if (this.scroll) {
    const position = this.scroll + height - this.height
    this.refs.sv.scrollTo({x: 0, y: position, animated: false})
  }
  this.height = height
}

// render:

<ScrollView ref="sv"
  scrollEventThrottle={16}
  onScroll={this.handleScroll}
  onContentSizeChange={this.handleSize}
>
  {content}
</ScrollView>

如果有人使某些东西变得更流畅，请告诉我们！

【讨论】：

谢谢，我认为你是对的，although it's not very smooth, it does the job，对于我的用例，我下拉加载前一页内容，handleSize 实际上在内容渲染后触发。所以用户体验是用户看到最上面的项目，然后被带回到他原来的位置。这真的不好，但找不到更好的方法，所以我接受你的。谢谢。
@LiuWenbin_NO.你有没有找到更好的方法？
我制作了animated:true，以免它看起来像一个小故障
@ZeeshanAhmadKhalil 很好的解决方法。但是如何才能做得更好呢？就像将whatsapp 聊天滚动到顶部一样流畅？
@YannickSchröder 使用 FlatList 而不是 scrollview

【解决方案2】：

更优雅的solotion：

<ScrollView
    ref={(ref => this.scrollViewRef = ref)}
    onScroll={event => { this.yOffset = event.nativeEvent.contentOffset.y }}
    onContentSizeChange={(contentWidth, contentHeight) => { this.scrollViewRef.scrollTo({ x: 0, y: this.yOffset, animated: false }) }}>

【讨论】：