Question

我使用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>
   );
  }
}

我正在使用： “ react-native”：“ 0.57.7”

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

任何帮助表示赞赏，我在这方面苦苦挣扎了几天！：）

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

0 个答案: