在React Native中获取ScrollView的当前滚动位置

Question

是否可以<ScrollView>在React Native中获取当前滚动位置或组件的当前页面？

所以类似于:

<ScrollView
  horizontal={true}
  pagingEnabled={true}
  onScrollAnimationEnd={() => { 
      // get this scrollview's current page or x/y scroll position
  }}>
  this.state.data.map(function(e, i) { 
      <ImageCt key={i}></ImageCt> 
  })
</ScrollView>

Answer 1

尝试.

<ScrollView onScroll={this.handleScroll} />

然后:

handleScroll: function(event: Object) {
 console.log(event.nativeEvent.contentOffset.y);
},

Answer 2

免责声明:以下内容主要是我在React Native 0.50中进行实验的结果.该ScrollView文件目前缺少下面提到的许多信息; 例如onScrollEndDrag,完全没有记录.由于这里的一切都依赖于无证件的行为,遗憾的是,我不能保证这些信息在一年甚至一个月之后仍然是正确的.

此外,下面的所有内容都假设一个纯粹的垂直滚动视图,我们感兴趣的y偏移; 如果需要,转换为x偏移对于读者来说有望是一个简单的练习.

ScrollView采取各种事件处理程序event,让您通过当前的滚动位置event.nativeEvent.contentOffset.y.其中一些处理程序在Android和iOS之间的行为略有不同,详情如下.

onScroll

在Android上

在用户滚动时触发每一帧,在用户释放滚动视图时滑动每一帧,在滚动视图停止时在最后一帧上触发,以及每当滚动视图的偏移因其帧而改变时改变(例如由于从风景到肖像的旋转).

在iOS上

在用户拖动时或在滚动视图滑动时触发,以某个频率确定,scrollEventThrottle每帧最多确定一次scrollEventThrottle={16}.如果用户在有足够的动力滑动时释放滚动视图,则在滑行onScroll后休息时也会触发处理程序.然而,如果用户拖动,然后释放滚动视图,而它是固定的,onScroll是不保证除非火为最终位置scrollEventThrottle已被设置,使得onScroll火灾滚动的每一帧.

设置的性能成本scrollEventThrottle={16}可以通过将其设置为更大的数量来降低.但是,这意味着onScroll每个帧都不会触发.

onMomentumScrollEnd

滑动后滚动视图停止时触发.如果用户在静止时释放滚动视图使其不会滑动,则根本不会触发.

onScrollEndDrag

当用户停止拖动滚动视图时触发 - 无论滚动视图是静止还是开始滑动.

鉴于行为的这些差异,跟踪偏移的最佳方式取决于您的确切情况.在最复杂的情​​况下(你需要支持Android和iOS,包括处理ScrollView由于旋转引起的框架变化,并且你不想接受Android上设置scrollEventThrottle为16 的性能损失),你需要处理滚动视图中的内容也发生了变化,那是一个非常糟糕的混乱.

最简单的情况是你只需要处理Android; 只需使用onScroll:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
>

为了额外支持iOS,如果你很乐意onScroll每帧都触发处理程序并接受它的性能影响,并且如果你不需要处理帧更改,那么它只是稍微复杂一点:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={16}
>

为了降低iOS上的性能开销,同时仍然保证我们记录滚动视图所处的任何位置,我们可以增加scrollEventThrottle并另外提供一个onScrollEndDrag处理程序:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={160}
>

但是如果我们想要处理帧更改(例如,因为我们允许设备旋转,更改滚动视图框架的可用高度)和/或内容更改,那么我们必须另外实现两者onContentSizeChange并onLayout跟踪两者的高度滚动视图的框架及其内容,从而不断计算最大可能偏移量,并推断由于框架或内容大小更改而自动减少偏移量:

<ScrollView
  onLayout={event => {
    this.frameHeight = event.nativeEvent.layout.height;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onContentSizeChange={(contentWidth, contentHeight) => {
    this.contentHeight = contentHeight;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  scrollEventThrottle={160}
>

是的,这太可怕了.我也不是100%肯定在你同时改变滚动视图的框架和内容的大小的情况下它总能正常工作.但这是我能想到的最好的,直到这个功能在框架内添加,我认为这是任何人都可以做到的最好的.

Answer 3

Brad Oyler的回答是正确的.但是你只会收到一个活动.如果你需要不断更新滚动位置,你应该设置scrollEventThrottle道具,如下所示:

<ScrollView onScroll={this.handleScroll} scrollEventThrottle={16} >
  <Text>
    Be like water my friend …
  </Text>
</ScrollView>

和事件处理程序:

handleScroll: function(event: Object) {
  console.log(event.nativeEvent.contentOffset.y);
},

请注意,您可能会遇到性能问题.相应地调整油门.16为您提供最多的更新.0只有一个.

Answer 4

以上答案告诉了如何使用不同的API来获取位置，onScroll，onMomentumScrollEnd等; 如果你想知道页面索引，你可以使用偏移值来计算它。

 <ScrollView 
    pagingEnabled={true}
    onMomentumScrollEnd={this._onMomentumScrollEnd}>
    {pages}
 </ScrollView> 

  _onMomentumScrollEnd = ({ nativeEvent }: any) => {
   // the current offset, {x: number, y: number} 
   const position = nativeEvent.contentOffset; 
   // page index 
   const index = Math.round(nativeEvent.contentOffset.x / PAGE_WIDTH);

   if (index !== this.state.currentIndex) {
     // onPageDidChanged
   }
 };

在iOS中，ScrollView与可见区域的关系如下：

参考：https : //www.objc.io/issues/3-views/scroll-view/

Answer 5

如果您希望简单地获取当前位置(例如,当按下某个按钮时)而不是在用户滚动时跟踪它,那么调用onScroll侦听器将导致性能问题.目前,简单获取当前滚动位置的最高效方法是使用react-native-invoke包.这个确切的事情有一个例子,但是包还有很多其他的东西.

在这里阅读它. https://medium.com/@talkol/invoke-any-native-api-directly-from-pure-javascript-in-react-native-1fb6afcdf57d#.68ls1sopd

Answer 6

要在滚动结束后按照原始问题的要求获取 x/y，最简单的方法可能是：

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={(event) => { 
      // scroll animation ended
      console.log(e.nativeEvent.contentOffset.x);
      console.log(e.nativeEvent.contentOffset.y);
   }}>
   ...content
</ScrollView>