4

我期望做什么：

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

在模态中我有：

 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。

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

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

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

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

4

1 回答 1

2

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

Animated.timing({..}).start(this.props.hideModal)
于 2019-03-14T01:01:14.490 回答