在我意识到 onStart() 没有被调用之前

在 Web 上使用 PanGestureHandler 并尝试“拖动” AnimatedView 在 Web 上不起作用。没有明显的错误，应用程序构建正常，检查时控制台没有警告。

有一个警告让我相信这可能是问题的根源。我在控制台上收到一个警告，内容如下：

"transform" 样式数组值已弃用。请使用以空格分隔的字符串函数，例如 "scaleX(2) rotateX(15deg)"。

我使用的是带有 containerStyle 的 AnimatedView 来对对象进行变换和拖动时的移动。

问题的根源

所以我进一步研究了这个问题，试图调试它，我意识到 onStart() 回调没有被调用。由于 onStart() 回调没有被调用，上下文值永远不会被设置，上下文对象整体上保持为空。这导致了我最初的问题，无法拖动对象。

不过，在 iOS 上仍然可以工作。出于某种原因，在 iOS 上 onStart() 回调被调用。这导致上下文被填充并且工作正常。

这是我的代码，记住这只是一个组件。在根目录中，我确实有一个 GestureHandlerRootView 组件包装整个应用程序。

import { View, Image } from 'react-native';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    useAnimatedGestureHandler,
    withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler, TapGestureHandler } 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 onDoubleTap = useAnimatedGestureHandler({
        onActive: () => {
            if (scaleImage.value !== imageSize * 2) {
                scaleImage.value = scaleImage.value * 2;
            } else {
                scaleImage.value = scaleImage.value / 2;
            }
        },
    });
    const onDrag = useAnimatedGestureHandler({
        onStart: (event, context) => {
            context.translateX = translateX.value;
            context.translateY = translateY.value;
        },
        onActive: (event, context) => {
            translateX.value = event.translationX + context.translateX;
            translateY.value = event.translationY + context.translateY;
        },
    });
    
    const imageStyle = useAnimatedStyle(() => {
        return {
            width: withSpring(scaleImage.value),
            height: withSpring(scaleImage.value),
        };
    });
    const containerStyle = useAnimatedStyle(() => {
        return {
            transform: [
                {
                    translateX: translateX.value,
                },
                {
                    translateY: translateY.value,
                },
            ],
        };
    });

    return (
        <PanGestureHandler onGestureEvent={onDrag}>
            <AnimatedView style={[containerStyle, { top: -350 }]}>
                <TapGestureHandler onGestureEvent={onDoubleTap} numberOfTaps={2}>
                    <AnimatedImage 
                        source={stickerSource}
                        resizeMode='contain'
                        style={[imageStyle, { width: imageSize, height: imageSize }]}
                    />
                </TapGestureHandler>
            </AnimatedView>
        </PanGestureHandler>
    );
}

顺便说一下，双击手势在 Web 和 iOS 上都完美工作。 我感到困惑，因为拖动在 iOS 上完美工作，但在 Web 上却不行。transform 样式的弃用使我尝试找出一种创建特定于 Web 的样式的方法，但我很难找到其他人遇到这个问题的情况。我相信有一个真正的解决方案，只是我可能遗漏了。我只是真的很困惑，因为它在 iOS 上完美工作，但在 Web 上却不行。

我尝试查看是否有其他人遇到类似的问题，但实际上没有找到任何相关的内容。我还尝试在控制台上搜索我看到的警告。

"transform" 样式数组值已弃用。请使用以空格分隔的字符串函数，例如 "scaleX(2) rotateX(15deg)"。

至少在我搜索与 React-Native 相关的内容时，我没有找到任何相关的内容。

我希望能找到一个在 Web 上可拖动的解决方案。