나는 새로운 애니메이션과 몸 처리기입니다. 나는 설명서를 읽어 이에 공식적인 반응하는 기본 애니메이션과의 조각 이 코드를 수있는 당신의 주위에 이동 블루 상자입니다.
https://reactnative.dev/docs/animations
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,
onPanResponderMove: Animated.event([
null,
{ dx: pan.x, dy: pan.y }
]),
onPanResponderRelease: () => {
Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
}
})
).current;
return (
<View style={styles.container}>
<Text style={styles.titleText}>Drag & Release 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;
그러나 내가 원하는 console.로그인 또는 소네 계산할 때 panresponder 이동이나 수정을 내 opPanResponderMove 하지만 블루 박스 기 더 이상입니다. 내가 왜?
내된 코드:
onPanResponderMove: (event, gestureState) => {
console.log(event);
console.log(gestureState);
Animated.event([
null,
{ dx: pan.x, dy: pan.y }
])
},