React Native useAnimatedGestureHandler n'est pas appelé uniquement dans onStart sur le Web

Question

Utiliser PanGestureHandler sur le Web et essayer de "faire glisser" AnimatedView ne fonctionnait pas sur le Web jusqu'à ce que je réalise que onStart() n'était pas appelé. Il n'y a pas d'erreurs évidentes, l'application se construit correctement et il n'y a aucun avertissement dans la console lors de la vérification. Il y a un avertissement qui me porte à croire que cela pourrait être la source du problème. Je reçois un avertissement sur la console qui dit : les valeurs des tableaux de style "transform" sont obsolètes. Veuillez utiliser une fonction de chaîne délimitée par des espaces, telle que "scaleX(2

P粉293550575 · Answer

Je l'ai vérifiéreact-native-reanimated的文档来解决了这个问题。显然，useAnimatedGestureHandler并没有被弃用，因为它在onDoubleTap中起作用，更不用说onDrag et cela fonctionne également bien sur iOS.

Mais dans la documentation traitant des gestes panoramiques j'ai trouvé ceci :

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

Donc, pas besoin d'importer PanGestureHandler和TapGestureHandler，也不需要从'react-native-reanimated'中导入useAnimatedGestureHandler，只需要从'react-native-gesture-handler'中导入Gesture和GestureDetector depuis 'react-native-gesture-handler'.

Gesture取代了useAnimatedGestureHandler，而GestureDetector取代了PanGestureHandler和TapGestureHandler et autres composants.

Je dois également utiliser useSharedValue()创建自己的contextX和contextY变量，因为据我所知，onBegin()和onChange()La fonction de rappel n'a pas de contexte réglable.

Quoi qu'il en soit, voici le code corrigé, qui fonctionne désormais parfaitement sur le web et sur 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 (
    
      
        
          
        
      
    
  );
}