Javascript 反应本机动画延迟不';不尊重给定值
我试图从屏幕顶部弹出一条消息,停留一段时间,然后返回屏幕外。问题是,当我尝试添加延迟时,无论我设置延迟的值是什么,它总是延迟大约5秒。下面是一个例子:Javascript 反应本机动画延迟不';不尊重给定值,javascript,react-native,animation,react-animated,Javascript,React Native,Animation,React Animated,我试图从屏幕顶部弹出一条消息,停留一段时间,然后返回屏幕外。问题是,当我尝试添加延迟时,无论我设置延迟的值是什么,它总是延迟大约5秒。下面是一个例子: import React, { Component } from "react"; import { Animated, View, Text, StyleSheet, Dimensions } from "react-native"; export default class PopupModal extends Co
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
}
});
import React,{Component}来自“React”;
从“react native”导入{动画、视图、文本、样式表、维度};
导出默认类PopupModal扩展组件{
建造师(道具){
超级(道具);
此.state={
留言:“你好!”,
yTranslation:新的动画.Value(0.1)
};
}
render(){
返回(
{this.state.message}
);
}
componentDidMount(){
动画序列([
动画。计时(this.state.ytransation{
toValue:130,
持续时间:500,
useNativeDriver:真的吗
}),
动画。计时(this.state.ytransation{
toValue:0,
延迟:10,//解决方案:
显然这是一个暂时的环境问题。我尝试了以下简单的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秒的时间。然后我卸载了应用程序,重新启动了模拟器(完全重新启动)并重新安装了应用程序,然后它工作正常。我不确定到底是什么修复了它,但我猜是重新启动了模拟器。我可能有更好的解释。由于某些原因,延迟在调试主机上处理,当设备时钟不同步时,它会中断。(请参阅长按问题)
证明:
让我们运行这个命令(Linux系统和MacOS)echo“Host\t\t$(日期+%Y-%m-%d\u%H:%m:%s)”&&echo“Emulator\t$(adb shell日期+%Y-%m-%d\u%H:%m:%s)”
。它将从主机系统和仿真器打印日期。我收到以下消息:
Host 2020-05-07_09:36:34
Emulator 2020-05-07_09:36:33
我的区别是一秒,这是关于我正在经历的延迟
修理
如果您在模拟器上运行,这应该很简单,尽管您需要运行“无生产版本”。原因是,您需要根访问权限。当然,这也可以通过根设备完成。请转到配置“无生产版本”
此命令应同步主机和仿真器之间的时间: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