react-native - 如何在 ScrollView 或 ListView 上保持位置？

Question

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

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

Answer 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>

如果有人让事情变得更顺畅，请告诉我们！

Answer 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 }) }}>