React Native Web端useAnimatedGestureHandler的onStart未触发问题求助

1. 修复transform样式的Web兼容性问题 #

Web端对React Native的transform数组格式支持不完善，这会导致元素位置计算异常，进而影响PanGestureHandler的手势识别触发。将containerStyle中的transform数组替换为Web兼容的字符串格式：

const containerStyle = useAnimatedStyle(() => {
    return {
        transform: `translateX(${translateX.value}px) translateY(${translateY.value}px)`,
    };
});

2. 为PanGestureHandler添加手势触发配置 #

Web端手势识别需要明确指定触摸点数阈值，给PanGestureHandler添加minPointers和maxPointers参数：

<PanGestureHandler 
    onGestureEvent={onDrag}
    minPointers={1}
    maxPointers={1}
>

3. 确保容器视图有明确的定位与尺寸 #

如果容器未设置绝对定位，top属性在Web端无法生效，且无明确尺寸会导致手势捕获区域异常。给AnimatedView补充定位和尺寸样式：

<AnimatedView style={[
    containerStyle, 
    { 
        top: -350,
        position: 'absolute',
        width: imageSize,
        height: imageSize
    }
]}>

4. 升级手势处理依赖版本 #

旧版本的react-native-gesture-handler在Web端存在手势触发的bug，升级到最新版本修复兼容性问题：

# npm
npm install react-native-gesture-handler@latest

# yarn
yarn add react-native-gesture-handler@latest

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: () => {
            scaleImage.value = scaleImage.value !== imageSize * 2 
                ? scaleImage.value * 2 
                : 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}px) translateY(${translateY.value}px)`,
        };
    });

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

内容的提问来源于stack exchange，提问作者JackAttack31