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

问题描述

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

<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元素。

我该如何实现？

解决方法

在触摸svg元素A并将手指移到元素B的同时，使用onResponderMove（event，gestureState）。我们可以立即处理句柄元素A，但不能直接处理B。在onResponderMove中，使用 (event.nativeEvent.locationX >= B.x && event.nativeEvent.locationX <= (B.x + b.width) && event.nativeEvent.locationY >= B.y && event.nativeEvent.locationY <= (B.y + B.height))

请告诉我您是否找到一种更好的方法来进行上述操作。 或使用react-native-gesture-handler中的PanGestureHandler。