Question

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

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();
    }
  },
});

我在animation.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

我正在这样使用，并且正在我的项目中工作：

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

Answer 2

在ScrollView上有一个默认的JS平移响应器。在这里，您可以在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>

为什么Animated.View中的ScrollView无法正常工作？

2 个答案:

解决方案：