平滑的向上滑动动画（React Native动画）

Question

我需要做什么：

一个可以通过向上滑动关闭的模态屏幕。

在模态中，我有：

 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。

目前主要问题是，当您滑动以关闭此模态框时，它不会平稳地向上移动并消失。它会上升到100px，停在一个位置然后开始消失。

如果删除this.props.hideModal()，这个模态框就会平稳地向屏幕顶部移动并消失，但它并没有完全关闭，之后你不能再点击任何其他按钮。

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

如何实现平稳关闭模态框？希望我描述我的问题清楚明了。

- Ivan Burzakovskyi

Answer 1

如果在动画完成后调用this.props.hideModal()是解决方法（我相信它是），你可以将其作为回调传递给.start()。"最初的回答"。

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

- Y. Gherbi