Что я ожидаю делать:
Модальный экран, который можно закрыть, проведя пальцем вверх.
Внутри модального у меня есть:
componentWillMount() {
this.animated = new Animated.Value(0);
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (e, gestureState) => {
const { dy } = gestureState;
if (dy < 0) {
this.animated.setValue(dy);
}
},
onPanResponderRelease: (e, gestureState) => {
const { dy } = gestureState;
if (dy < -100) { // Swipe up away
Animated.timing(this.animated, {
toValue: -400,
duration: 150
}).start();
this.props.hideModal();
this.doSomething();
} else if (dy > -100 && dy < 0) { // Swipe back to initial position
Animated.timing(this.animated, {
toValue: 0,
duration: 150
}).start();
}
}
})
}
Это модальное окно появляется при нажатии кнопки в родительском компоненте. По умолчанию в этом родителе есть значение состояния showModal : ложь. При открытии Modal это состояние меняется на истинный, а при закрытии на ложный.
Основная проблема на данный момент заключается в том, что когда вы проводите по экрану, чтобы закрыть этот модальный режим, он не поднимается плавно и не исчезает. Он увеличивается до 100 пикселей, останавливается на месте и начинает исчезать.
Если убрать this.props.hideModal(), этот модал плавно поднимается вверх экрана и исчезает, как я хочу, но он не закрывается полностью, и после этого вы не можете нажимать никакие другие кнопки.
По сути, мне нужно запустить this.props.hidModal() ПОСЛЕ завершения анимации.
Как я могу реализовать плавное закрытие модального окна? Надеюсь понятно описал свою проблему.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если вызов this.props.hideModal() после завершения анимации является исправлением (как я полагаю), вы можете передать это как обратный вызов .start().
Animated.timing({..}).start(this.props.hideModal)