React Native - panResponder 动画在 iOS 上不起作用

Posted 2023-05-08

【中文标题】React Native - panResponder 动画在 iOS 上不起作用

【英文标题】：React Native - panResponder animation not working on iOS

【发布时间】：2019-08-11 00:45:29

【问题描述】：

我使用 panResponder 在我的应用程序中创建可拖动视图。它在 android 上运行良好，但在 ios 上，拖动动画在移动一点后停止。

Vidéo here 这是我的代码：

export default class Draggable extends React.Component 

constructor(props) 
  super(props);

  const  pressDragRelease, pressDragStart, reverse, initPosition  = props;

this.state = 
  pan: new Animated.ValueXY(
    x: initPosition.dragX,
    y: initPosition.dragY
  ),
  _value:  x: initPosition.dragX, y: initPosition.dragY 
;

this.panResponder = PanResponder.create(
  onStartShouldSetPanResponder: (evt, gestureState) => true,
  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
  onPanResponderGrant: (gesture) => 
    console.log("inside panResponder grant");
    if (reverse === false) 
      this.state.pan.setOffset(x: this.state._value.x,y: this.state._value.y);
      this.state.pan.setValue( x: 0, y: 0 );
     else 
      this.state.pan.setValue( x: gesture.dx, y: gesture.dy );
    
  ,
  onPanResponderMove: Animated.event([
      null,
      
        dx: this.state.pan.x,
        dy: this.state.pan.y
      
    ]),
    //Called on android at the end
    onPanResponderRelease: () => 
      if (pressDragRelease) 
        pressDragRelease( x: this.state._value.x, y: this.state._value.y );
      

    if (reverse === false) this.state.pan.flattenOffset();
    else this.reversePosition();

  ,
  //Called on ios at the end
  onPanResponderTerminate: () => 

    if (pressDragRelease) 
      pressDragRelease( x: this.state._value.x, y: this.state._value.y 
   );
    

    if(reverse === false) 
      this.state.pan.flattenOffset();
     else 
      this.reversePosition();
    

  
);


componentWillMount() 
 if (this.props.reverse === false)
   this.state.pan.addListener(c => this.setState( _value: c ));


componentWillUnmount() 
  this.state.pan.removeAllListeners();


reversePosition = () => 
  const  initPosition  = this.props;
  Animated.spring(this.state.pan, 
    toValue:  x: initPosition.dragX, y: initPosition.dragY 
  ).start();
;

render() 
  return (
    <Animated.View
      ...this.panResponder.panHandlers
      style=[this.state.pan.getLayout()]
    >
      this.props.children
    </Animated.View>
   );
  

我正在使用： “反应原生”：“0.57.7”

我尝试了很多与 panResponder 相关的东西，因为它在 android 上运行良好我来宾这是处理程序或 onPanResponderMove 处理程序中的 Animated.event 的问题？

感谢您的帮助，我为此苦苦挣扎了好几天！ :)

【问题讨论】：

您是否已经轻松使用过动画计时？Easing.linear？

我只是尝试了一些带有“Animated.timing”的动画，效果很好。

【参考方案1】：

也遇到了这个问题。 删除了我的节点模块和 pod 并重新安装它能够解决它。

我知道过去反应导航有冲突。 https://github.com/react-navigation/react-navigation/issues/5497

实际上在使用使用 panResponder 构建的滑块库时遇到了这个问题。