检测另一个视图何时被触摸-在react native中使用PanResponder拖动

detect when another view is touched - dragging with PanResponder in react native

本文关键字：native 拖动 PanResponder react 视图 另一个 何时 触摸 检测      更新时间：2023-09-26

我有一个纸牌游戏，用户可以在屏幕上拖动纸牌。

如何检测卡片是否已被拖过其他视图组件？我的可拖动卡代码是这样的：

// A draggable card
// drag drop code example used: https://github.com/brentvatne/react-native-animated-demo-tinder
// panresponder docs: https://facebook.github.io/react-native/docs/panresponder.html
class Card extends React.Component {
  componentWillMount() {
  this.state = {
    pan: new Animated.ValueXY(),
    enter: new Animated.Value(1),
  }
  this._panResponder = PanResponder.create({
    onMoveShouldSetResponderCapture: () => true,
    onMoveShouldSetPanResponderCapture: () => true,
    onPanResponderGrant: (e, gestureState) => {
               Animated.spring(this.state.enter, {
        toValue: .75,
      }).start()
      this.state.pan.setOffset({x: this.state.pan.x._value, 
                              y: this.state.pan.y._value});
      this.state.pan.setValue({x: 0, y: 0});
    },
    onPanResponderMove: Animated.event([
      null, {dx: this.state.pan.x, dy: this.state.pan.y},
    ]),
    onPanResponderRelease: (e, {vx, vy}) => {
      // do stuff when card released 
    }
    Animated.spring(this.state.enter, {
      toValue: 1,
    }).start()
    this.state.pan.flattenOffset();
    var velocity;
    if (vx >= 0) {
      velocity = clamp(vx, 3, 5);
    } else if (vx < 0) {
      velocity = clamp(vx * -1, 3, 5) * -1;
    }
    Animated.spring(this.state.pan, {
          toValue: {x: 0, y: toValue},
          friction: 4
    }).start()
    }
  })
}

我不知道这是否是最好的方法，但我只会得到目标视图的onLayout，以获得x、y、宽度和高度。。。

<View onLayout={({nativeEvent: {layout: {x,y,width,height}}) => { })} />

容器覆盖的坐标将简单地为（x，x+宽度）和（y，y+高度）

onPanResponderGrant获取可拖动对象的位置：

onPanResponderGrant: (e) => {
  this.originX = e.pageX - e.locationX;
  this.originY = e.pageY - e.locationY;
}

onPanResponderMove你可以这样做：

onPanResponderMove: (e, gestureState) => {
  const currentX0 = this.originX + gestureState.dx
  const currentY0 = this.originY + gestureState.dy 
}

现在可拖动的范围包括从currentX0到currentX0 + width以及从currentY0到currentY0 + height。。。

您可以使用这些值来检查它是否与目标视图(x, x+width)和(y, y+height) 重叠

相关文章：