मैं सुंदर हूँ के लिए नए एनिमेशन और इशारा हैंडलर है । मैं पढ़ रहा हूँ दस्तावेज में आधिकारिक प्रतिक्रिया देशी एनिमेशन और मैंने पाया एक टुकड़ा के इस कोड की सुविधा देता है कि आप के चारों ओर स्थानांतरित करने के लिए नीले बॉक्स.
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 लेकिन नीले बॉक्स doesn ' t move anymore. मैं सोच रहा था कि क्यों?
मेरे कोड संशोधित:
onPanResponderMove: (event, gestureState) => {
console.log(event);
console.log(gestureState);
Animated.event([
null,
{ dx: pan.x, dy: pan.y }
])
},