Я использую PanResponder для перемещения изображения-1. Мое требование - когда я перемещаю изображение-1 в верхнюю часть экрана, изображение-1 меняется на изображение-2. И когда я перемещаю изображение 2 в нижнюю часть экрана, изображение 2 меняется на изображение 1.
Я понятия не имею об этом @@
Спасибо за помощь!
class ShowEat extends Component {
pan = new Animated.ValueXY();
isCheck = false
panResponder = PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
this.pan.setOffset({
x: this.pan.x._value,
y: this.pan.y._value
});
},
onPanResponderMove: Animated.event([
null,
{ dx: this.pan.x, dy: this.pan.y }
]),
onPanResponderRelease: () => {
this.pan.flattenOffset();
if (this.pan.y < -290) {
this.isCheck = true
}
}
});
render() {
return (
<View style={styles.container}>
<Animated.View
style={{
transform: [{ translateX: this.pan.x }, { translateY: this.pan.y }]
}}
{...this.panResponder.panHandlers}
>
{this.isCheck ? (
<Image
source={require("../assets/img/Pho/image-1.png")}
style={{
width: 100,
height: 100,
}}
resizeMode="contain"
/>
) : (
<Image
source={require("../assets/img/Pho/image-2.png")}
style={{
width: 100,
height: 100,
}}
resizeMode="contain"
/>
)}
</Animated.View>
</View>
);
}
}