平滑向上滑动动画（React Native Animation）答案

【问题标题】：Smooth swipe up animation (React Native Animation)平滑向上滑动动画（React Native Animation）
【发布时间】：2019-03-14 09:01:14
【问题描述】：

我希望做什么：

您可以通过向上滑动关闭的模式屏幕。

在我拥有的模态中：

 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。打开 Modal 时此状态变为 true，关闭时变为 false。

目前的主要问题是，当您滑动关闭此 Modal 时，它不会顺利上升并消失。它上升到 100 像素，停在一个地方并开始消失。

如果删除 this.props.hideModal() 这个 Modal 会平滑地上升到屏幕的顶部并按我的意愿消失，但它并没有完全关闭并且之后就不能再点击其他按钮了。

基本上，我需要在动画完成后运行 this.props.hidModal()。

如何实现Modal的平滑关闭？我希望我可以理解地描述我的问题。

【问题讨论】：

标签： javascript reactjs react-native android-animation react-native-animatable

【解决方案1】：

如果在动画完成后调用this.props.hideModal() 是修复（我相信它是），您可以将此作为回调传递给.start()。

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

【讨论】：