Плавная прокрутка анимации (React Native Animation) - PullRequest
Новая
       15

Плавная прокрутка анимации (React Native Animation)

4 голосов
/ 13 марта 2019

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

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

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

 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: false .При открытии модального состояния это состояние изменяется на true , а при закрытии на false .

Основная проблема на данный моментзаключается в том, что когда вы проводите для закрытия, этот модальный не плавно поднимается и исчезает.Он увеличивается до 100 пикселей, останавливается на месте и начинает исчезать.

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

В основном мне нужно запустить this.props.hidModal () ПОСЛЕ того, как анимация была закончена.

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

1 Ответ

2 голосов
/ 14 марта 2019

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

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