React Native PanResponder 在旋转变换后沿相反方向平移
import React, { useRef } from "react";
import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";
const App = () => {
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
pan.setOffset({
x: pan.x._value,
y: pan.y._value
});
},
onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),
onPanResponderRelease: () => {
pan.flattenOffset();
}
})
).current;
return (
<View style={[styles.container, { transform: [{ rotate: "180deg" }] }]}>
<Text style={[styles.titleText, { transform: [{ rotate: "180deg" }] }]}>
Drag this box!
</Text>
<Animated.View
style={{
transform: [{ translateX: pan.x }, { translateY: pan.y }]
}}
{...panResponder.panHandlers}
>
<View style={styles.box} />
</Animated.View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
titleText: {
fontSize: 14,
lineHeight: 24,
fontWeight: "bold"
},
box: {
height: 150,
width: 150,
backgroundColor: "blue",
borderRadius: 5
}
});
export default App;
在上面的代码中,旋转 180 度后平移响应器计算的平移与用户的触摸手势相反。我怎样才能正确地翻译为角度可以是任何值。请在此处查看实时示例代码和框