检测何时触摸另一个视图 - 在本机反应中使用 PanResponder 拖动

Posted 2023-02-21

【中文标题】检测何时触摸另一个视图 - 在本机反应中使用 PanResponder 拖动

【英文标题】：detect when another view is touched - dragging with PanResponder in react native

【发布时间】：2016-02-08 20:43:38

【问题描述】：

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

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

// 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()
    
  )

【问题讨论】：

如果被拖动的视图的任何部分与另一个视图重叠，或者只有当用户的实际光标/触摸点在内部通过时，它是否算作对另一个视图的拖动另一种观点？

我正在尝试编写代码来检测两个视图何时完全重叠，但任何提示都会有所帮助。

【参考方案1】：

我不知道这是否是最好的方法，但我只需获取目标视图的onLayout 即可获取 x、y、宽度和高度...

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

容器覆盖的坐标就是 (x, x+width) 和 (y, y+height)

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)重叠