React Native useAnimatedGestureHandler wird nicht nur in onStart im Web aufgerufen

Question

Die Verwendung von PanGestureHandler im Web und der Versuch, die AnimatedView zu „ziehen“, funktioniert im Web erst, wenn mir klar wird, dass onStart() nicht aufgerufen wird. Es liegen keine offensichtlichen Fehler vor, die Anwendung wird einwandfrei erstellt und bei der Überprüfung werden in der Konsole keine Warnungen angezeigt. Es gibt eine Warnung, die mich vermuten lässt, dass dies die Ursache des Problems sein könnte. Ich erhalte eine Warnung auf der Konsole, die lautet: Array-Werte im „Transform“-Stil sind veraltet. Bitte verwenden Sie eine durch Leerzeichen getrennte Zeichenfolgenfunktion, z. B. „scaleX(2

P粉293550575 · Answer

我通过查阅react-native-reanimated的文档来解决了这个问题。显然，useAnimatedGestureHandler并没有被弃用，因为它在onDoubleTap中起作用，更不用说onDrag在iOS上也正常工作。

但是在处理平移手势的文档中，我找到了这个：

const pan = Gesture.Pan()
  .onBegin(() => {
    pressed.value = true;
  })
  .onChange((event) => {
    offset.value = event.translationX;
  })
  .onFinalize(() => {
    offset.value = withSpring(0);
    pressed.value = false;
  });

所以，不需要从'react-native-gesture-handler'中导入PanGestureHandler和TapGestureHandler，也不需要从'react-native-reanimated'中导入useAnimatedGestureHandler，只需要从'react-native-gesture-handler'中导入Gesture和GestureDetector。

Gesture取代了useAnimatedGestureHandler，而GestureDetector取代了PanGestureHandler和TapGestureHandler等组件。

我还需要使用useSharedValue()创建自己的contextX和contextY变量，因为据我所知，onBegin()和onChange()回调函数没有可设置的上下文。

无论如何，这是修复后的代码，现在在Web和iOS上都完美运行：

import { View, Image } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const AnimatedImage = Animated.createAnimatedComponent(Image);
const AnimatedView = Animated.createAnimatedComponent(View);

export default function EmojiSticker({ imageSize, stickerSource }) {
  const scaleImage = useSharedValue(imageSize);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const contextX = useSharedValue(0);
  const contextY = useSharedValue(0);

  const onDoubleTap = Gesture.Tap().numberOfTaps(2)
    .onEnd(() => {
      if (scaleImage.value !== imageSize * 2) {
        scaleImage.value = scaleImage.value * 2;
      } else {
        scaleImage.value = scaleImage.value / 2;
      }
    });
  const onDrag = Gesture.Pan()
    .onBegin(() => {
      contextX.value = translateX.value;
      contextY.value = translateY.value;
    })
    .onChange((event) => {
      translateX.value = event.translationX + contextX.value;
      translateY.value = event.translationY + contextY.value;
    });

  const imageStyle = useAnimatedStyle(() => {
    return {
      width: withSpring(scaleImage.value),
      height: withSpring(scaleImage.value),
    };
  });
  const containerStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: translateX.value,
        },
        {
          translateY: translateY.value,
        },
      ],
    };
  });

  return (
    
      
        
          
        
      
    
  );
}