javascript - 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 度后平移响应器计算的平移与用户的触摸手势相反。我怎样才能正确地翻译为角度可以是任何值。请在此处查看实时示例代码和框
解决方案
推荐阅读
- python - numpy.fft.fft 中参数 n 的影响是什么
- excel - 通过忽略 MS Excel 中非相邻单元格的 NA 来计算最小值
- mysql - MySQL where in integer vs. where in string
- database - 我们可以减少 hive 中表头之间的空格还是可以关闭表头中的表名
- java - 在 java 1 22 3 4444 5 666666 7 88888888 中使用 for 循环对此数字模式进行编程。没有得到所需的模式
- python-3.x - 从多个选项菜单中获取每个选项菜单的索引
- ruby-on-rails - 我有一个带有 Doorkeeper OAuth2 client_credentials 的 Rails APP API。如何在控制器内获取不记名令牌信息?
- xml - 文本的空 JSON Http 响应
- c++ - bash: ./main.o 无法执行二进制文件 Exec 格式错误
- python - 在 AWS EC2 CentOS 7.4 中运行 Certbot 时出错