反应原生动画延迟不尊重给定值答案

【问题标题】：React native animated delay doesn't respect given value反应原生动画延迟不尊重给定值
【发布时间】：2019-07-24 08:43:05
【问题描述】：

我正在尝试从屏幕顶部弹出一条消息，停留一段时间然后回到屏幕外。问题是当我尝试添加延迟时，无论我设置什么延迟值，它总是延迟大约 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 模拟器

【问题讨论】：

标签： javascript react-native animation react-animated

【解决方案1】：

解决方案：

显然这是一个临时环境问题。我试过这个简单的javascript sn-p：

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

【讨论】：

【解决方案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

我的差异是一秒，这与我正在经历的延迟有关。

修复

如果您在模拟器上运行，这应该很简单，尽管您需要运行“非生产版本”。原因是，您需要 root 访问权限。当然，这也可以通过有根设备来完成。转到here 配置“非生产版本”。

这个命令应该同步你的主机和模拟器之间的时间：adb root && adb shell date "$(date +%m%d%H%M%Y.%S)"（对于物理的、有根的设备，你可能需要运行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

【讨论】：