响应本机PanResponder以获取当前的scrollView位置

时间:2016-02-05 22:13:28

标签: javascript reactjs react-native

我想通过使用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}>

2 个答案:

答案 0 :(得分:0)

假设触摸释放意味着当一次触摸停止存在时,您可以使用ScrollVIew的onTouchEnd prop。

我会通过使用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的事件。

答案 1 :(得分:0)

不确定为什么要在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拖动和滚动浏览滚动时会出现一些问题。 更详细的是https://github.com/facebook/react-native/issues/1046