javascript - 为什么 Animated.View 里面的 ScrollView 不起作用？

Question

我想在这里提问，我已经使用平移响应器制作了可拖动 View 。我设法让它只能上下移动。这是我的泛响应配置

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 作为该组件的子项时， ScrollView 不会滚动。我不知道为什么会这样，谢谢。

Answer 1

关于 ScrollView ，有一个默认的 JS pan 响应器。在这里，您创建 PanResponder在 Animated.View .在谈判过程中， 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>