添加数据时保持ScrollView的位置答案

【问题标题】：Hold Position of ScrollView when adding data添加数据时保持ScrollView的位置
【发布时间】：2018-03-25 00:01:30
【问题描述】：

我正在努力做到这一点，所以每当新的东西被渲染到滚动视图中时，滚动视图将保持不变并且不会上下颠簸。现在如果渲染了一个新组件，滚动视图似乎被重置为 0。

有没有办法阻止这种行为并保持位置？

现在我正在使用的滚动视图：

handleScrollt(event){
    this.scroll = event.nativeEvent.contentOffset.y
  }

handleSizet(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
}



  <ScrollView
      ref="sv"

       scrollEventThrottle={16}

       onScroll={this.handleScrollt.bind(this)}
  onContentSizeChange={this.handleSizet.bind(this)}

这个问题是滚动视图会短暂渲染，然后滚动到正确的偏移量。所以看起来屏幕顶部有短暂的飞溅

【问题讨论】：

标签： react-native react-native-scrollview

【解决方案1】：

你必须为滚动视图定义一个高度。

如果滚动视图应该覆盖整个视图，您可以通过以下方式获取视图的高度：

<View style={styles.contactView} onLayout={(event) => { 
  var contactViewY = event.nativeEvent.layout.y;
  this.setState({contactViewY: contactViewY})
}}>

然后把它交给滚动视图

<ScrollView style={[styles.contactScroller, {height: this.state.contactViewY}]}>

请记住，onLayout 方法会在布局计算完毕后立即调用，因此如果稍后视图的高度发生变化，仅这两行代码不会更新它。

【讨论】：

【解决方案2】：

你应该试试maintainVisibleContentPosition。

例子：

<ScrollView
    {...props}
    maintainVisibleContentPosition={{
      minIndexForVisible: 0,
    }}
/>

来自文档：

维护VisibleContentPosition

设置后，滚动视图将调整滚动位置，以便当前可见且处于或超过的第一个孩子 minIndexForVisible 不会改变位置。这对列表很有用在两个方向上加载内容，例如一个聊天线程，在哪里进来的新消息可能会导致滚动位置跳。值 0 很常见，但也可以使用其他值，例如 1 跳过加载微调器或其他不应维护的内容位置。

【讨论】：