javascript - react native 动画延迟不尊重给定值

Question

我正在尝试从屏幕顶部弹出一条消息，停留一段时间然后返回到屏幕之外。问题是当我尝试添加延迟时，无论我设置的延迟值是什么，它总是延迟大约 5 秒。这是一个例子:

    import React, { Component } from "react";
    import { Animated, View, Text, StyleSheet, Dimensions } from "react-native";

    export default class PopupModal extends Component {
        constructor(props) {
            super(props);

            this.state = {
                message: "Hello!",
                yTranslation: new Animated.Value(0.1)
            };
        }

        render() {
            return (
                <Animated.View style={{ ...styles.container, transform: [{ translateY: this.state.yTranslation }] }}>
                    <View style={styles.innerContainer}>
                        <Text>{this.state.message}</Text>
                    </View>
                </Animated.View>
            );
        }

        componentDidMount() {
            Animated.sequence([
                Animated.timing(this.state.yTranslation, {
                    toValue: 130,
                    duration: 500,
                    useNativeDriver: true
                }),
                Animated.timing(this.state.yTranslation, {
                    toValue: 0,
                    delay: 10, // <-- Here it doesn't matter which value I choose, it always delays for about 5 seconds.
                    duration: 500,
                    useNativeDriver: true
                })
            ]).start();
        }
    }

    const win = Dimensions.get("window");

    const styles = StyleSheet.create({
        container: {
            position: "absolute",
            bottom: win.height,
            left: 60,
            right: 60,
            alignItems: "center",
            justifyContent: "center"
        },
        innerContainer: {
            paddingHorizontal: 10,
            paddingVertical: 5,
            backgroundColor: "white",
            borderColor: "#444",
            borderWidth: 5,
            borderRadius: 10
        }
    });

react 版本:16.8.3

React Native 版本:0.59.9

设备:Pixel 2 (API 28) 安卓模拟器

Answer 1

解决方案:

显然这是一个临时的环境问题。我尝试了这个简单的 javascript 片段:

console.log("before: ", new Date());
setTimeout(() => {
    console.log("after: ", new Date());
}, 10);

哪个输出:

before:  Wed Jul 24 2019 12:37:21 GMT+0200 (centraleuropeisk sommartid)
after:  Wed Jul 24 2019 12:37:27 GMT+0200 (centraleuropeisk sommartid)

所以这 10 毫秒大约用了 6 秒。然后我卸载了该应用程序，重新启动了模拟器(完全重启)并重新安装了该应用程序，然后它就可以正常工作了。我不确定究竟是什么修复了它，但我猜是重新启动模拟器。