0

我有这样的用户界面：

<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真的是 SVGRect元素。

我该如何实施？

4

1 回答 1

0

使用 onResponderMove(event, gestureState)，同时触摸 svg 元素A并将手指移动到元素B。我们可以直接处理元素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。

于 2020-12-09T07:36:33.537 回答