反应本机动画延迟不尊重给定值

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
        }
    });

反应版本：16.8.3

React Native 版本：0.59.9

设备：Pixel 2 (API 28) Android 模拟器

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 秒。然后我卸载了该应用程序，重新启动了模拟器（完全重启）并重新安装了该应用程序，然后它就可以正常工作了。我不确定究竟是什么修复了它，但我的猜测是重新启动模拟器。

Answer 2

我可能有更好的解释。出于某种原因，延迟在调试主机上处理，当设备的时钟不同步时，它会中断。（请参阅 this 长按问题）。

证明：

让我们运行这个命令（Linux 系统，也许还有 MacOS）echo "Host\t\t$(date +%Y-%m-%d_%H:%M:%S)" && echo "Emulator\t$(adb shell date +%Y-%m-%d_%H:%M:%S)"。它将打印来自主机系统和模拟器的日期。我收到这个：

Host            2020-05-07_09:36:34
Emulator        2020-05-07_09:36:33

我的差异是一秒，这是我遇到的延迟。

修复

如果您运行正在使用模拟器，这应该很简单，尽管您需要运行正在"none production build"。原因是，您需要 root 权限。当然，这也可以用有根设备来完成。去配置一个 "none production build".

此命令应同步您的主机和模拟器之间的时间：adb root && adb shell date "$(date +%m%d%H%M%Y.%S)"（对于物理、root 设备，您可能需要运行 adb shell su -c date "$(date +%m%d%H%M%Y.%S)"）。

现在你的时钟应该完全同步了

Host            2020-05-07_09:50:06
Emulator        2020-05-07_09:50:06

反应本机动画延迟不尊重给定值

React native animated delay doesn't respect given value

javascript

animation

react-native

react-animated

证明：

修复