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 (将#修改为@）