如何撤消react-native-gesture-handler

问题描述

我正在使用react-native-reanimated v 1.9和react-native-gesture-handler来在屏幕上拖动元素，我需要能够在用户按下“撤消”按钮。

初始化一些动画值后：

this.X = new Value();
this.Y = new Value();
const offsetX = new Value();
const offsetY = new Value();

.... this.handlePan 函数从此处获取平移事件：

 <PanGestureHandler
          ref={this.panRef}
          enabled={this.panGestureHandlerEnabler}
          onGestureEvent={this.handlePan}
          onHandlerStateChange={this.handlePan}>
          <Animated.View>
            .......
          </Animated.View>
  </PanGestureHandler>

从this.handlePan中的

将事件映射到 x 和 y ，然后可以使用react-native-animated的 call（）方法，可在平移移动结束时提取一些动画值，并将其用于函数 recordNewState（）：

 this.handlePan = event([
      {
        nativeEvent: ({
          translationX: x,translationY: y,absoluteY: Y,absoluteX: X,state,}) =>
          block([
            set(this.X,add(x,offsetX)),set(this.Y,add(y,offsetY)),cond(eq(state,State.END),[
              set(offsetX,add(offsetX,x)),set(offsetY,add(offsetY,y)),call([this.X,this.Y],(finalXY) => {
              recordNewState({
              action: 'XY',value: {X: x,Y: y},});
           }),]),},{useNativeDriver: true},]);

函数 recordNewState（）基本上建立了一组动画值，这些值可用于 undo（）函数：

this.undo = () => {
  if (lastRecordedState.length > 1) {
    const undoAction = 
     lastRecordedState[lastRecordedState.length - 1];
    switch (undoAction.action) {
      case 'XY':
        block([
          offsetX.setValue(sub(offsetX,undoAction.value.X)),offsetY.setValue(sub(offsetY,undoAction.value.Y)),]);
        break;
      default:
        break;
    }
  }
};

在这里，我在switch语句中检查最新的动画值（undoAction.action），如果它是XY，我将翻译项目减去最新的动画值。与

   block([
          offsetX.setValue(sub(offsetX,]);

该项目不会移回先前的位置，并且再次调用call（）方法，从而向数组添加另一个动画值。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-native-gesture-handler react-native-reanimated