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 。

目前的主要问题是，当您滑动关闭该模态时，该模态不会平稳上升并消失。上升到100像素，停在某个地方，然后开始消失。

如果删除 this.props.hideModal（） ，此模式会平稳地上升到屏幕顶部并消失，但是我并没有完全关闭之后，您将无法再单击其他任何按钮。

基本上，我需要在动画制作完成后运行 this.props.hidModal（） 。

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

Answer 1

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

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

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

1 个答案: