我的屏幕(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。我的意思是宽度大于高度
当我单独尝试每个功能时,它们都可以工作,但在一起时只有平移手势才有效,而不能捏合。