Question

我试图这样做，只要将新内容渲染到滚动视图中，滚动视图就会保持不变而不会上下颠簸。现在，如果呈现新组件，则滚动视图似乎重置为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)}

这个问题是scrollview将简要渲染，然后滚动到正确的偏移量。所以它似乎是屏幕顶部的短暂闪现

Answer 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方法，因此，如果以后更改视图的高度，仅这两行代码就不会对其进行更新。

Answer 2

您应该尝试maintainVisibleContentPosition。

示例：

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

从文档中：

maintainVisibleContentPosition

设置后，滚动视图将调整滚动位置，以使   当前可见且在或超过该范围的第一个孩子   minIndexForVisible不会更改位置。这对于列表很有用   双向加载内容的网站，例如聊天线程   出现新消息可能会导致滚动位置   跳。值通常是0，但也可以使用其他值，例如1   跳过加载微调器或其他不应维护的内容   位置。

添加数据时保持ScrollView的位置

2 个答案: