Question

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

有没有办法保持/跟踪位置？例如，如果高度为20的新数据进入，则位置会自动将位置调整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

更优雅的装饰：

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

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

2 个答案: