反應本地PanResponder以獲取當前的scrollView位置

Question

我想通過使用PanResponder獲得我的scrollView的當前y偏移。 這是我到目前為止所做的，但是我找不到找到當前y偏移的方法

componentWillMount() {
   this._panResponder = PanResponder.create({
     onMoveShouldSetPanResponder: (evt, gestureState) => true,
     onPanResponderRelease: (evt, gestureState) => {
      console.log(this.scrollView) //this logs my scrollView
     }
   });
}

<ScrollView ref={(view) => this._scrollView = view} {...this._panResponder.panHandlers}>

Answer 1

假設觸摸釋放是指一鍵停止存在的那一刻，則可以使用ScrollVIew的onTouchEnd道具來實現。

我可以通過使用onScroll將偏移量保存在某個位置，然后使用onTouchEnd對該偏移量執行某些操作來做到這一點。

<ScrollView
  onScroll={(event) => {
    this.offsetY = event.nativeEvent.contentOffset.y;
  }}
  onTouchEnd={(event) => {
    console.log('offsetY:', this.offsetY);
    console.log('touch info:', event.nativeEvent);
  }}
>
  {content of the scroll view}
</ScrollView>

如果通過觸摸釋放表示您應該有零次觸摸，則可以通過傳遞給onTouchEnd的事件來進行確認。

Answer 2

不確定為什么要在panResponder響應中訪問y偏移量。 但是有一種方法可以做到。 首先，您需要在組件中定義一個局部變量，例如：

this.currentScrollViewX=0;
this.currentScrollViewY=0;

通常，滾動事件發生時，您可以跟蹤scrollView偏移量。 您可以在ScrollView添加道具，例如

<ScrollView onScroll = {e => this._onScroll(e)} ...>
...
</ScrollView>

然后在組件中定義_onScroll方法，在發生滾動時更新currentScrollViewX和currentScrollViewY

_onScroll(e){
    this.currentScrollViewX = e.nativeEvent.contentOffset.x;
    this.currentScrollViewY = e.nativeEvent.contentOffset.x;
}

然后在onPanResponderRelease處理程序中，始終可以通過引用this.currentScrollViewY來獲取最新的y偏移量。

如果要使用PanResponder在ScrollView中拖放動畫，則在PanResponder拖動和scrollView滾動時會出現一些問題。 更詳細的信息在這里https://github.com/facebook/react-native/issues/1046