React Native useAnimatedGestureHandler onStart 仅在 Web 上不被调用

Question

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

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

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

"transform" style array value is deprecated. Use space-separated string functions, e.g., "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>
    );
}

顺便说一句，双击手势在网络和 iOS 上都可以完美运行。 我很困惑，因为拖动在 iOS 中工作得很好，但在 Web 上却不行。变换样式的贬值促使我尝试找出一种创建特定于 Web 的样式的方法，但我很难找到其他遇到此问题的人。我确信我只是缺少一个真正的解决方案。我真的很困惑，因为它在 iOS 上运行得很好，但在 Web 上却不行。

我试图看看其他人是否有任何与此相关的问题，但找不到任何东西。我还尝试查找在控制台中看到的警告。

"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".

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

我希望有一个解决方案，使其可以在网络上拖动。

Answer 1

我实际上通过查看 的文档解决了这个问题react-native-reanimated。显然useAnimatedGestureHandler它并没有被弃用，因为它可以与 .NET 一起使用onDoubleTap，更不用说onDrag在 iOS 上运行得很好。

但在浏览有关如何处理平移手势的文档时，我发现了这一点：

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

因此，不必从“react-native-gesture-handler”和“react-native-reanimated”导入PanGestureHandlerand TapGestureHandler，useAnimatedGestureHandler而只需从“react-native-gesture-handler”导入Gestureand 。GestureDetector

Gesture最终取代了useAnimatedGestureHandlerwhileGestureDetector取代了PanGestureHandler和等组件TapGestureHandler。

我最终还必须使用自己的contextXandcontextY变量useSharedValue()，因为据我所知，onBegin()andonChange()回调没有可设置的上下文。

无论如何，这是现在在 Web 和 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>
  );
}