画面の上部からポップアップメッセージが表示され、しばらく表示された後、画面の外に戻るようにしようとしています。問題は、遅延を追加しようとすると、遅延の値を何に設定しても、常に約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
}
});
Reactバージョン：16.8.3
React Nativeバージョン：0.59.9
デバイス：Pixel 2（API 28）Androidエミュレーター
解決：
どうやらこれは一時的な環境問題でした。私はこの単純な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秒かかりました。次に、アプリをアンインストールし、エミュレーターを再起動して（完全に再起動）、アプリを再インストールしましたが、問題なく動作しました。正確に何が修正されたかはわかりませんが、エミュレータを再起動していると思います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加