Reactnative PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

发布于02月03日

我已经创建了一个PanResponder来垂直移动Animated.View.当我将其从原始位置移动时，效果很好，但当我再次移动它时，它会恢复到原始位置，然后相对于touch 移动.

我把应答器直接放进了Animated.View，这会导致这种行为吗？

下面是我如何定义PanResponder的:

this.state = {                            
  drag: new Animated.ValueXY()            
}                                         

this._responder = PanResponder.create({                                              
    onStartShouldSetPanResponder: () => true,                             
    onPanResponderMove: Animated.event([null, {                           
      dy: this.state.drag.y                                             
    }]),                                                                  
    onPanResponderRelease: (e, coords) => {
      ...
    }     
})

将应答器应用于我的Animated.View:

<Animated.View {...this._responder.panHandlers} style={this.state.drag.getLayout()}>
  // children go here
</Animated.View>

谢谢

推荐答案

首先，让我们看看为什么会发生这种情况:

您的onPanResponderMove回调读取手势的dy(增量Y)，这将为您提供自手势开始以来垂直移动的像素量.这意味着每次你开始一个新的手势，增量从0开始.
另一方面，AnimatedXY#getLayout()只是将y值映射到样式属性top.这意味着在touch 开始时将y设置为0时，元素将反弹回其初始的非偏移位置.

为了保留与上一次拖动的偏移，可以使用setOffset保留上一次的偏移位置，然后使用setValue将初始增量重置为0.这可以在手势开始时完成，例如在onPanResponderGrant:

this._responder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderGrant: (evt, gestureState) => {
    this.state.drag.setOffset(this.state.drag.__getValue());
    this.state.drag.setValue({ x: 0, y: 0 });
  },
  onPanResponderMove: Animated.event([
    null,
    { dy: this.state. drag.y }
  ])
});

如你所见，我们在这里使用的是"私有"方法__getValue().通常，同步读取动画的值.不建议使用该值，因为动画可能会卸载到本机线程，并且该值可能不是最新的.在这里，在手势的开始，它应该是安全的.

作为旁注，由于只在Y轴上移动元素，因此不一定需要使用二维Animated.ValueXY，因为基本Animated.Value就足够了.如果您重构代码以使用Value，您可以调用drag.extractOffset()来重置偏移量.它也有同样的功能，但AnimatedXY上似乎没有.

Reactnative PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

推荐答案

React-native相关问答推荐

Firebase身份验证Redux使用说明

单击时更改ToucheableOpacity colored颜色不起作用

使用下拉菜单时react 本机react-native-dropdown-select-list，它会将下面的项目向下移动.如何阻止这种情况发生

在 React Native 中使用 Flatlist scrollView 时的模式关闭

使用 Auth Token 标头react 本机图像，如何处理 401？

RTK 查询显示互联网何时关闭？

无法设置文本输入参考

有人可以帮我实现 Font.loadAsync

react-native 自定义视图，原生 prop 没有 propType

找不到变量 atob

No component found for view with name "ARTShape"

如何为 Picker 提供默认的Please select...选项？

为 React Native TextInput 创建 ref 时出现 TypeScript 问题

我可以将标题传递给图像源吗？

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

在 React Native 视图上强制 onLayout

opneUrl react-native 链接调用，mailto

如何将 React Native Promise 连接到 Swift

React-Native 水平滚动视图分页：预览下一页/卡片

无法在react-native中分配给#