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

Question

I have a UI like this:

<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
| |__||__||__| |
|______________|

I want to update the You are touching: a text when a different element is touched. Specifically, I want to support this usage:

• Press down at any point in the container with one finger
• While keeping the finger in the screen, move the finger to any box a/b/c
• When the finger touches a/b/c , update the text
• Move the finger to another box and update the text again
• Etc.

I tried adding onPressIn handlers to each box. This works for tapping a single box. However, if I move my finger between boxes, then the other boxes' onPressIn handlers are not called. In other words, I have to lift my finger before another box will observe a touch event.

I have implemented this before by adding PanResponder handlers to Container and figuring out which box is touched based on move events' coordinates. This approach is cumbersome, and I assume there is a simpler way to implement the desired behavior.

If it matters, the container is really a react-native-svg Svg element and the boxes a/b/c are really SVG Rect elements.

How can I implement this?

Answer 1

Using onResponderMove(event, gestureState), while touched svg element A and moved finger to element B . We can straight away handle element A but not B . In onResponderMove , use (event.nativeEvent.locationX >= Bx && event.nativeEvent.locationX <= (Bx + b.width) && event.nativeEvent.locationY >= By && event.nativeEvent.locationY <= (By + B.height))

Do let me know if you found a better way of doing the above. Or use PanGestureHandler from react-native-gesture-handler.