React Native useAnimatedGestureHandler tidak dipanggil hanya dalam onStart di web

Question

Sebelum saya sedar onStart() tidak dipanggil

Menggunakan PanGestureHandler di web dan cuba "menyeret" AnimatedView tidak berfungsi di web. Tiada ralat yang jelas, aplikasi dibina dengan baik dan tiada amaran dalam konsol semasa menyemak.

Terdapat amaran yang membuatkan saya percaya ini mungkin punca masalah. Saya mendapat amaran pada konsol yang berbunyi:

nilai tatasusunan gaya "transform" tidak digunakan lagi. Sila gunakan fungsi rentetan terhad ruang, seperti "scaleX(2) rotateX(15deg)".

Saya menggunakan AnimatedView dengan containerStyle untuk mengubah dan memindahkan objek apabila diseret.

Punca masalah

Jadi, saya meneliti masalah ini dengan lebih lanjut, cuba menyahpepijatnya, dan saya menyedari bahawa panggilan balik onStart() tidak dipanggil. Memandangkan panggilan balik onStart() tidak dipanggil, nilai konteks tidak pernah ditetapkan dan objek konteks kekal kosong secara keseluruhan. Ini membawa kepada masalah asal saya, tidak dapat menyeret objek.

Walau bagaimanapun, ia masih akan berfungsi pada iOS. Atas sebab tertentu pada iOS panggilan balik onStart() dipanggil. Ini menyebabkan konteks diisi dan berfungsi dengan baik.

Ini kod saya, ingat ini hanyalah komponen. Dalam direktori akar, saya mempunyai komponen GestureHandlerRootView yang membungkus keseluruhan aplikasi.

import { View, Image } daripada 'react-native';
import Animasi, {
    gunakanAnimatedStyle,
    useSharedValue,
    gunakanAnimatedGestureHandler,
    denganSpring,
} daripada 'react-native-reanimate';
import { PanGestureHandler, TapGestureHandler } daripada 'react-native-gesture-handler';

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

eksport fungsi lalai EmojiSticker ({ imageSize, stickerSource }) {
    skala constImage = useSharedValue(imageSize);
    const translateX = useSharedValue(0);
    const translateY = useSharedValue(0);

    const onDoubleTap = useAnimatedGestureHandler({
        onActive: () => {
            if (scaleImage.value !== imageSize * 2) {
                skalaImage.value = skalaImage.value * 2;
            } lain {
                skalaImage.value = skalaImage.value / 2;
            }
        },
    });
    const onDrag = useAnimatedGestureHandler({
        onStart: (acara, konteks) => {
            context.translateX = translateX.value;
            context.translateY = translateY.value;
        },
        onActive: (acara, konteks) => {
            translateX.value = event.translationX + context.translateX;
            translateY.value = event.translationY + context.translateY;
        },
    });
    
    const imageStyle = useAnimatedStyle(() => {
        kembali {
            lebar: withSpring(scaleImage.value),
            ketinggian: withSpring(scaleImage.value),
        };
    });
    const containerStyle = useAnimatedStyle(() => {
        kembali {
            mengubah: [
                {
                    translateX: translateX.value,
                },
                {
                    translateY: translateY.value,
                },
            ],
        };
    });

    kembali (
        <PanGestureHandler onGestureEvent={onDrag}>
            <AnimatedView style={[containerStyle, { atas: -350 }]}>
                <TapGestureHandler onGestureEvent={onDoubleTap} numberOfTaps={2}>
                    <Imej Animasi 
                        source={stickerSource}
                        resizeMode='mengandungi'
                        style={[imageStyle, { width: imageSize, height: imageSize }]}
                    />
                </TapGestureHandler>
            </AnimatedView>
        </PanGestureHandler>
    );
}

顺便说一下，双击手势在 Web 和 iOS 上都完美工作。 我感到困惑，因为拖动在 iOS 上完美工作，但在 Web 上却不行。Penamatan gaya transformasi membuatkan saya cuba memikirkan cara untuk mencipta gaya khusus web, tetapi saya menghadapi masalah mencari situasi di mana orang lain menghadapi masalah ini. Saya percaya ada penyelesaian sebenar, saya mungkin merinduinya. Saya benar-benar keliru kerana ia berfungsi dengan sempurna pada iOS tetapi tidak di web.

Saya cuba melihat sama ada orang lain mengalami masalah yang sama tetapi sebenarnya tidak menemui apa-apa yang berkaitan. Saya juga cuba mencari di konsol untuk amaran yang saya lihat.

nilai tatasusunan gaya "transform" telah ditamatkan. Sila gunakan fungsi rentetan terhad ruang, seperti "scaleX(2) rotateX(15deg)".

Sekurang-kurangnya apabila saya mencari sesuatu yang berkaitan dengan React-Native, saya tidak menemui apa-apa yang berkaitan.

Saya ingin mencari penyelesaian yang boleh diseret di web.

Answer 1

Saya telah menyemaknyareact-native-reanimated的文档来解决了这个问题。显然，useAnimatedGestureHandler并没有被弃用，因为它在onDoubleTap中起作用，更不用说onDrag dan ia juga berfungsi dengan baik pada iOS.

Tetapi dalam dokumentasi yang berkaitan dengan gerak isyarat kuali saya dapati ini:

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

Jadi, tidak perlu mengimport PanGestureHandler和TapGestureHandler，也不需要从'react-native-reanimated'中导入useAnimatedGestureHandler，只需要从'react-native-gesture-handler'中导入Gesture和GestureDetector daripada 'react-native-gesture-handler'.

Gesture取代了useAnimatedGestureHandler，而GestureDetector取代了PanGestureHandler和TapGestureHandler dan komponen lain.

Saya juga perlu menggunakan useSharedValue()创建自己的contextX和contextY变量，因为据我所知，onBegin()和onChange()Fungsi panggil balik tiada konteks untuk ditetapkan.

Apa pun, berikut ialah kod tetap, yang kini berfungsi dengan sempurna pada kedua-dua web dan 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 (
    <GestureDetector gesture={onDrag}>
      <AnimatedView style={[containerStyle, { top: -350 }]}>
        <GestureDetector gesture={onDoubleTap}>
          <AnimatedImage
            source={stickerSource}
            resizeMode="contain"
            style={[imageStyle, { width: imageSize, height: imageSize }]}
          />
        </GestureDetector>
      </AnimatedView>
    </GestureDetector>
  );
}