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

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

反应本机版本：0.59.9

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

Answer 1

我可能有更好的解释。出于某种原因，在调试主机上处理延迟，当设备的时钟不同步时，它会中断。（请参阅长按此问题）。证明：让我们运行这个命令（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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2020-05-07_09:36:34Emulator&nbsp; &nbsp; &nbsp; &nbsp; 2020-05-07_09:36:33我的差异是一秒钟，这与我正在经历的延迟有关。修复如果您在模拟器上运行，这应该很简单，尽管您需要运行“非生产版本”。原因是，您需要 root 访问权限。当然，这也可以通过root设备完成。去这里配置一个“无生产构建”。此命令应该同步您的主机和模拟器之间的时间：（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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2020-05-07_09:50:06Emulator&nbsp; &nbsp; &nbsp; &nbsp; 2020-05-07_09:50:06