Плавная анимация смахивания вверх (React Native Animation)

Что я ожидаю делать:

Модальный экран, который можно закрыть, проведя пальцем вверх.

Внутри модального у меня есть:

 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() ПОСЛЕ завершения анимации.

Как я могу реализовать плавное закрытие модального окна? Надеюсь понятно описал свою проблему.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
2 089
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Animated.timing({..}).start(this.props.hideModal)

Другие вопросы по теме