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

我可能有一个更好的解释。由于某些原因，延迟会在调试主机上处理，并且当设备的时钟不同步时，它会中断。（请参见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

我的差异是一秒钟，这与我遇到的延迟有关。

FIX

如果您正在仿真器上运行，则这很简单，尽管您需要运行“无生产版本”。原因是，您需要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

Answer 2

解决方案：

显然这是暂时的环境问题。我尝试了以下简单的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秒钟的时间。然后，我卸载了该应用程序，重新启动了模拟器（完全重新启动），然后重新安装了该应用程序，然后工作正常。我不确定它到底能解决什么问题，但我猜想是要重启模拟器。

反应原生动画延迟不遵守给定值

2 个答案:

证明：

FIX