当触摸点在多个可触摸元素之间移动时，如何跟踪当前触摸的元素？

Question

我有一个这样的用户界面：

<Container>
  <Box id="a" />
  <Box id="b" />
  <Box id="c" />
</Container>
<Text>You are touching: {touchedBoxId}</Text>

 ______________
|container     |
|  __  __  __  |
| |a ||b ||c | | You are touching: a
| |__||__||__| |
|______________|

我想更新You are touching: a不同元素时的文本。 具体来说，我想支持这种用法：

• 用一根手指按下容器中的任何一点
• 在将手指保持在屏幕上的同时，将手指移动到任何a/b/c框
• 当手指触摸a/b/c ，更新文本
• 将手指移动到另一个框并再次更新文本
• 等等。

我尝试向每个框添加onPressIn处理程序。 这适用于点击单个框。 但是，如果我在框之间移动手指，则不会调用其他框的onPressIn处理程序。 换句话说，在另一个盒子观察到触摸事件之前，我必须抬起我的手指。

我之前通过将PanResponder处理程序添加到Container并根据移动事件的坐标确定触摸了哪个框来实现这一点。 这种方法很麻烦，我认为有一种更简单的方法来实现所需的行为。

如果重要的话，容器实际上是一个react-native-svg Svg元素，而框a/b/c是真正的 SVG Rect元素。

我该如何实施？

Answer 1

使用 onResponderMove(event,gestureState)，同时触摸 svg 元素A并将手指移动到元素B 。 我们可以直接处理元素A而不是B 。 在onResponderMove ，使用(event.nativeEvent.locationX >= Bx && event.nativeEvent.locationX <= (Bx + b.width) && event.nativeEvent.locationY >= By && event.nativeEvent.locationY <= (By + B.height))

如果您找到了更好的方法来完成上述操作，请告诉我。 或者使用 react-native-gesture-handler 中的 PanGestureHandler。