react-native - 当触摸点在多个可触摸元素之间移动时,如何跟踪当前触摸的元素?
问题描述
我有这样的用户界面:
<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
元素。
我该如何实施?
解决方案
使用 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。
推荐阅读
- ios - iOS UITests 通过 Xcode 但因 xcodebuild 失败
- c# - 如何退出 C# GraphQL 订阅?
- python - 如何在python中检查另一个列表中的列表
- reactjs - 如何处理循环中的复选框反应原生
- python - 将 CSV 文件迁移到 Django SQL 后端的最佳方法?
- r - 用于比较的连接灰线
- php - 下载功能改为下载 .php 文件
- python - Plotly:带有“href”的树形图元素不起作用
- oracle11g - 我需要将日期更改为 sysdate 并保持时间,因为它来自下面的查询
- angular - 检查后表达式已更改 - ngTemplateOutletContext