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

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

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

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

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

如何实现模态框的平滑关闭？我希望我能理解地描述我的问题。

Answer 1

如果在动画结束后调用 this.props.hideModal() 是解决方法（我相信是这样），您可以将其作为回调传递给 .start()。

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

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

Smooth swipe up animation (React Native Animation)

javascript

reactjs

react-native

android-animation

react-native-animatable