react-native更改响应者动态

时间:2016-07-05 08:31:38

标签: android react-native draggable uiresponder

我正在使用react-native进行Android开发。我有一个视图,如果用户长按,我想显示一个可以拖动的动画视图。我可以使用PanResponder来实现这一点,它可以正常工作。

但我想要做的是当用户长按时,用户应该能够继续相同的触摸/按下并拖动新显示的Animated.View。

如果您熟悉Google云端硬盘应用,则它具有类似的功能。当用户长按列表中的任何项目时,它会显示可拖动项目。用户可以直接拖动项目。

enter image description here

我认为如果我可以在开始显示之后动态地将Responder更改为可拖动项目,那么这将有效。

问题

react-native是否提供了动态更改响应者的方法?

到目前为止我尝试了什么

  • 我尝试更改onStartShouldSetPanResponderCaptureonMoveShouldSetPanResponderCaptureonMoveShouldSetPanResponderonPanResponderTerminationRequest的逻辑,以便一旦可拖动项目开始显示容器视图就不应该捕获开始并移动并接受终止请求,同时将false返回到可拖动项的终止请求,并返回true,它应捕获事件。

  • 对我来说,一个解决方法是在容器顶部显示可拖动项目,不透明度较低,并将其捕获为假。一旦用户长按它,我就会改变它的不透明度,使其清晰可见。通过这种方法,用户可以继续触摸以拖动项目。但容器实际上是一个列表行。因此,我需要创建许多可拖动的,因为用户可以长按任意一行。

但我认为这不是一个好的解决方案,如果我能改变响应者,那就太好了。

1 个答案:

答案 0 :(得分:6)

简单回答

据我所知, no ,您无法动态更改视图的响应者。

onStartShouldSetPanResponderCapture这样的方法无法对您尝试拖动的子视图起作用的原因是这些方法是在触摸 start 上触发的,并且根据定义,在触摸开始时,您描述的行为中实现onStartShouldSetPanResponderCapture的子视图尚不存在。

但是,没有理由为什么应该在子视图上实现泛响应方法:

解决方案

从实现中退一步,所需的实际功能是应用程序中的某些组件需要成为泛响应者。当平移响应者移动时,您将收到触摸事件。此时,您可以在子视图上setNativeProps来反映平移手势中的更改。

因此,如果您想移动子视图,则无需将该子视图作为响应者。您可以简单地将作为响应者,然后从父级更新子道具。

我已经在下面实施了一个示例应用,这里是对正在发生的事情的逐步解释:

  1. 您有一个呈现ListView的组件。 ListView是您的平底响应者。列表视图中的每个单元格都有TouchableOpacity,可响应长按。

  2. 当长按事件发生时(行onLongPress道具被触发),您将在顶部以浮动视图重新渲染父组件。此视图的绝对位置由您的父组件this._previousLeftthis._previousTop拥有的两个属性控制。

  3. 现在,这个浮动子视图并不关心响应触摸。父母已经回复了。所有孩子都关心的是它的两个位置属性。因此,要移动浮动子组件,您所要做的就是使用top组件的left更新其setNativePropsView属性,{{1} 1}} _handlePanResponderMove提供的功能。

  4. <强>摘要

    当您处理触摸时,您不需要需要移动的组件实际上是侦听触摸事件的组件。被移动的组件只需要通过 监听触摸事件来更新其位置属性。

    以下是您在Google云端硬盘应用中描述的longPress / Pan手势的完整代码:

    ListView

    RN 0.29对我有用。我确信这里可以做很多优化,但我只是想在一个快速的早晨对它进行黑客攻击来说明一般概念。

    我希望这有帮助!