React Native - анимация panResponder не работает на iOS - PullRequest
Новая
       14

React Native - анимация panResponder не работает на iOS

0 голосов
/ 20 марта 2019

Я использую panResponder для создания перетаскиваемого представления в моем приложении.Он отлично работает на Android, но на iOS анимация перетаскивания останавливается после небольшого перемещения.

Видео здесь Вот мой код: 

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>
   );
  }
}

Я использую: "Reaction-native": "0.57.7"

Я перепробовал много вещей, связанных с panResponder, так как он отлично работает на Android. Гость, это вопрос обработчика или события Animated.event в обработчике onPanResponderMove?

Любая помощь приветствуется, я борюсь за нее уже несколько дней!:)

...