如何解决React Native PanResponder 在旋转变换后表现相反
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 度后的平移计算与用户的触摸手势相反。我怎么能正确地转换为角度可以是任何值。请在此处查看现场示例codesandbox
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。