为什么 Animated.View 中的 ScrollView 不起作用？

Question

我想在这里问问题，我已经使用 pan responder 制作了可拖动视图。 我让它只能上下移动。 这是我的泛响应器配置

this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (event, gesture) => true,
  // THIS TRACK MOVEMENT OF OUR FINGER 
  onPanResponderMove: (event, gesture) => {
    if (gesture.dy > 0) {
      this.position.setValue({ y: gesture.dy });
    }
  },
  onPanResponderRelease: (event, gesture) => {
    if (gesture.dy > SWIPE_THRESHOLD) {
      this.forceSwipeDown();
    } else {
       this.resetPosition();
    }
  },
});

我在 animated.view 中使用它，这是代码

<Animated.View
       style={[modalCard, this.position.getLayout()]}
       {...this.panResponder.panHandlers}
      >
        {
          // XButton
        }
        <TouchableOpacity style={button} onPress={() => this.props.closeModal()}>
          <Icon 
            name='times'
            size={wp(20)}
            color='#A9A9A9'
          />
        </TouchableOpacity>
        <View style={topBorders}>
          <View style={doubeLine} />
        </View>
        {this.props.children}
      </Animated.View>

我的问题是，当我将 ScrollView 作为该组件的子级时，滚动视图不会滚动。 我不知道为什么会这样，谢谢。

Answer 1

在ScrollView ，有一个默认的 JS 平移响应器。 在这里，您在Animated.View创建PanResponder 。 在协商过程中， Animated.View成为触摸的响应者，而ScrollView不是。

解决方案：

您可以捕获ScrollView外部的触摸事件，而忽略ScrollView内部的触摸事件。 通过这样做， ScrollView可以滚动。

代码可能是这样的：

    _ignoreRegion = {
      x: 0,
      y: 0,
      width: 0,
      height: 0
    }


    _onLayout = ({
      nativeEvent: {
        layout: {
          x,
          y,
          width,
          height
        }
      }
    }) => {
      this._ignoreRegion = nativeEvent.layout;
    };

    _isInsideRegion = (x, y, region) => {
       return x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height;
    }

    this._panResponder = PanResponder.create({
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
           if (this._isInsideRegion(evt.pageX, evt.pageY, this._ignoreRegion)) {
             return false; 
           } else {
             return true; 
           }
        },
        // .... 
    })

JSX

 <Animated.View {...this._panResponder.panHandlers}>            
    <ScrollView onLayout={this._onLayout}/>
</Animated.View> 

Answer 2

通过配置onMoveShouldSetPanResponder （不是另一个答案建议的onMoveShouldSetPanResponderCapture ）应该返回 true，我能够在Animated.View中包含一个ScrollView 。 当它返回 true 时， Animated.View将捕获滑动事件。 当它返回 false 时，滑动事件将被Animated.View忽略并被下方的任何视图捕获。 因此，假设我们知道ScrollView的 x 坐标范围是[xLo, xHi]并且 y 坐标范围是[yLo, yHi] ，我们可以这样创建一个panResponder

const panResponder = React.useRef(
  PanResponder.create({
    onMoveShouldSetPanResponder: (_, {dx, dy, moveX, moveY}) => {
      if (xLo <= moveX && moveX <= xHi && yLo <= moveY && moveY <= yHi) {
        return false;
      }
      return true;
  }),
).current;

这个panResponder保证Animated.View忽略[xLo, xHi]和[yLo, yHi]设置的边界内的所有滑动事件，但注册边界外的滑动事件。

[xLo, xHi]和[yLo, yHi]可以通过measure回调获取。

下面是使用该方法实现的一个demo。 有关更多演示和源代码，请查看文档。

完全公开，我是@fanchenbao/react-native-sliding-drawer的作者。

Answer 3

我是这样使用的，它正在我的项目中工作：

<Animated.View>
    <ScrollView>
        { this.renderMultimpleItems() }
    </ScrollView>
</Animated.View>