Я хочу переместить элемент вправо, чтобы разместить его. Я нажимаю с событием onPress
.
Пример, если я нажимаю на экран с позицией x: 200, y: 300
, поэтому мой элемент должен переместиться туда из позиции x: -100, y: -100
, Я пробовал, но он не перемещается в то положение, которое я нажимаю на экране. мой код: , хотя он перемещается, но перемещается не совсем туда, куда я хочу ...
const styles = StyleSheet.create({
alertAutoCloseContainer: {
left: 0, top: 0,
margin: 10, marginHorizontal: 40, position: 'absolute',
padding: 10, maxWidth: 500, maxHeight: 400, zIndex: 1000,
backgroundColor: 'rgba(0, 50, 50, 0.8)', borderRadius: 5,
},
alertAutoCloseText: {
color: '#fff', fontFamily: 'IRANSansMobile'
}
});
const { Value } = Animated;
const animatedValue = new Value(0);
const MyAlert = memo(forwardRef(({ }, ref) => {
const [state, setState] = useReducer((s, v) => v, {
status: true, xAxis: 0, yAxis: 0, parentData: {
text: ""
}
});
useImperativeHandle(ref, () => {
return ({
startAnimation: ({ xAxis, yAxis, parentData }) => {
const { status } = state;
setState({
...state, xAxis, yAxis,
parentData, status: !status
});
Animated.timing(animatedValue, {
toValue: status === true ? 1 : 0, duration: 500
}).start();
},
stopAnimation: ({ }) => {
Animated.timing(animatedValue, {
toValue: 0, duration: 500
}).start();
}
})
});
console.log(state.xAxis, state.yAxis);
return (
<Animated.View style={{
...styles.alertAutoCloseContainer, transform: [
{
translateY: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, state.yAxis],
extrapolate: 'clamp'
})
},
{
translateX: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, state.xAxis],
extrapolate: 'clamp'
})
},
{
scale: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
})
}
]
}}>
<Text style={styles.alertAutoCloseText}>
{state.parentData.text}
</Text>
</Animated.View>
);
}), (p, n) => true);