React Native useAnimatedGestureHandler가 웹의 onStart에서만 호출되지 않습니다.

Question

onStart()가 호출되지 않았다는 것을 깨닫기 전에는

웹에서 PanGestureHandler를 사용하고 AnimatedView를 "드래그"하는 것은 웹에서 작동하지 않습니다. 명백한 오류가 없고 애플리케이션이 정상적으로 빌드되며 확인할 때 콘솔에 경고가 표시되지 않습니다.

이것이 문제의 원인일 수 있다고 생각하게 만드는 경고가 있습니다. 콘솔에 다음과 같은 경고가 표시됩니다.

"변환" 스타일 배열 값은 더 이상 사용되지 않습니다. "scaleX(2)rotateX(15deg)"와 같이 공백으로 구분된 문자열 함수를 사용하세요.

컨테이너 스타일이 포함된 AnimatedView를 사용하여 드래그할 때 개체를 변환하고 이동합니다.

문제의 근원

그래서 문제를 더 자세히 살펴보고 디버깅을 시도한 결과 onStart() 콜백이 호출되지 않는다는 것을 깨달았습니다. onStart() 콜백이 호출되지 않으므로 컨텍스트 값은 설정되지 않으며 컨텍스트 객체는 전체적으로 비어 있습니다. 이로 인해 개체를 끌 수 없다는 원래 문제가 발생했습니다.

그러나 iOS에서는 계속 작동합니다. 어떤 이유로 iOS에서는 onStart() 콜백이 호출됩니다. 이로 인해 컨텍스트가 채워지고 제대로 작동하게 됩니다.

이것은 제 코드입니다. 이것은 단지 구성요소일 뿐이라는 점을 기억하세요. 루트 디렉터리에는 전체 애플리케이션을 래핑하는 GestureHandlerRootView 구성 요소가 있습니다.

'react-native'에서 { 보기, 이미지 } 가져오기;
수입 애니메이션, {
    사용애니메이션 스타일,
    사용SharedValue,
    사용AnimatedGestureHandler,
    봄과 함께,
} '반응 네이티브 재활성화'에서;
import { PanGestureHandler, TapGestureHandler } from 'react-native-gesture-handler';

const AnimatedImage = Animated.createAnimatedComponent(이미지);
const AnimatedView = Animated.createAnimatedComponent(View);

기본 함수 내보내기 EmojiSticker ({ imageSize, 스티커 소스 }) {
    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;
            } 또 다른 {
                scaleImage.value = scaleImage.value / 2;
            }
        },
    });
    const onDrag = useAnimatedGestureHandler({
        onStart: (이벤트, 컨텍스트) => {
            context.translateX = 번역X.값;
            context.translateY = 번역Y.값;
        },
        onActive: (이벤트, 컨텍스트) => {
            번역X.값 = 이벤트.번역X + 컨텍스트.번역X;
            번역Y.값 = 이벤트.번역Y + 컨텍스트.번역Y;
        },
    });
    
    const imageStyle = useAnimatedStyle(() => {
        반품 {
            너비: withSpring(scaleImage.value),
            높이: withSpring(scaleImage.value),
        };
    });
    const 컨테이너 스타일 = useAnimatedStyle(() => {
        반품 {
            변환: [
                {
                    번역X: 번역X.값,
                },
                {
                    번역Y: 번역Y.값,
                },
            ],
        };
    });

    반품 (
        <PanGestureHandler onGestureEvent={onDrag}>
            <AnimatedView 스타일={[containerStyle, { top: -350 }]}>
                <TapGestureHandler onGestureEvent={onDoubleTap} numberOfTaps={2}>
                    <애니메이션 이미지 
                        출처={stickerSource}
                        resizeMode='포함'
                        스타일={[imageStyle, { 너비: imageSize, 높이: imageSize }]}
                    />
                </TapGestureHandler>
            </애니메이션 보기>
        </PanGestureHandler>
    );
}

顺便说一下，双击手势에서 웹과 iOS 上道完美工work. 나는 iOS 上完美工惑에서 因为拖动에서 Web 上却不行을 하고 있습니다.변환 스타일의 지원 중단으로 인해 웹 관련 스타일을 만드는 방법을 찾으려고 노력했지만 다른 사람들이 이 문제에 직면한 상황을 찾는 데 어려움을 겪고 있습니다. 나는 진정한 해결책이 있다고 믿지만, 내가 그것을 놓쳤을 수도 있습니다. iOS에서는 완벽하게 작동하지만 웹에서는 작동하지 않기 때문에 정말 혼란스럽습니다.

다른 사람도 비슷한 문제가 있는지 확인하려고 했지만 실제로 관련된 내용을 찾지 못했습니다. 또한 내가 본 경고를 콘솔에서 검색해 보았습니다.

"변환" 스타일 배열 값은 더 이상 사용되지 않습니다. "scaleX(2)rotateX(15deg)"와 같이 공백으로 구분된 문자열 함수를 사용하세요.

적어도 React-Native 관련 내용을 검색했을 때는 관련된 내용을 찾지 못했습니다.

웹에서 드래그 가능한 솔루션을 찾고 싶습니다.

Answer 1

확인해 보니react-native-reanimated的文档来解决了这个问题。显然，useAnimatedGestureHandler并没有被弃用，因为它在onDoubleTap中起作用，更不用说onDrag iOS에서도 잘 작동합니다.

하지만 팬 제스처를 다루는 문서에서 다음을 발견했습니다:

으아악

그러므로 '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()콜백 함수에는 설정할 컨텍스트가 없습니다.

어쨌든, 이제 웹과 iOS 모두에서 완벽하게 작동하는 고정 코드는 다음과 같습니다.

으아악