反应原生平移手势和捏合手势不能一起工作。只有平底锅在工作,不能捏

问题描述 投票:0回答:0

我的屏幕(MedicalDetail)的源代码如下:

import { View, Image, Dimensions, Animated } from "react-native";
import React from "react";
import {
  GestureHandlerRootView,
  PinchGestureHandler,
  PanGestureHandler,
} from "react-native-gesture-handler";

const MedicineDetail = ({ route }) => {
  const { imagePath } = route.params;

  const width = Dimensions.get("window").width;
  const height = Dimensions.get("window").height;
  const scale = React.useRef(new Animated.Value(1)).current;
  const translateX = React.useRef(new Animated.Value(0)).current;
  const translateY = React.useRef(new Animated.Value(0)).current;

  const onPinchEvent = Animated.event([{ nativeEvent: { scale: scale } }], {
    useNativeDriver: true,
  });
  const onPanEvent = Animated.event(
    [
      {
        nativeEvent: {
          translationX: translateX,
          translationY: translateY,
        },
      },
    ],
    { useNativeDriver: true }
  );

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff",
      }}
    >
      <GestureHandlerRootView>
        <PanGestureHandler onGestureEvent={onPanEvent}>
          <Animated.View>
            <PinchGestureHandler onGestureEvent={onPinchEvent}>
              <Animated.Image
                source={imagePath}
                style={{
                  transform: [ { scale },{translateX},{translateY},{ rotate: "90deg" },],
                  width: height,
                  height: width,
                  resizeMode: "contain",
                }}
              />
            </PinchGestureHandler>
          </Animated.View>
        </PanGestureHandler>
      </GestureHandlerRootView>
    </View>
  );
};

export default MedicineDetail;

我有什么错误吗?其他一切都正常。

我将图像旋转90度,因为图像是2504*1851。我的意思是宽度大于高度

当我单独尝试每个功能时,它们都可以工作,但在一起时只有平移手势才有效,而不能捏合。

reactjs react-native pan react-native-gesture-handler pinch
© www.soinside.com 2019 - 2024. All rights reserved.