如何在 react native 中几秒钟后从启动画面移动到登录屏幕?

Question

我是 react native 的初学者，对 x 秒延迟后两个屏幕之间的导航感到非常困惑。

如何在 react native 中几秒钟后从启动画面移动到登录屏幕？

Answer 1

这就是iv'e通过在stackNavigator中将启动屏幕作为初始路由，然后在3秒后在componentDidMount中导航到LoginScreen来实现这一点。

{
initialRouteName: "SplashScreen"
}

这是在堆栈导航器内部。

并在启动画面类的组件 DidMount 中执行此操作

componentDidMount(){
window.setTimeout(async () => {
const token = await isSignedIn();
this.props.navigation.navigate(token ? 'HomeScreen' : 'OnBoardingScreen');
}, 3000);
}  

所以IM所做的是，IM检查令牌是否由isSignedIn()存储在asyncStorage中。 如果存在令牌，则 IM 在 3 秒后分别导航到HomeScreen or LoginScreen(3000 表示毫秒(

随意怀疑。

更新：

从"反应"导入反应，{ 组件 }; 从"反应本机"导入 { 视图，状态栏 }; 从 '.. 导入 { isSignedIn }/../服务/身份验证'; 从"洛蒂-反应原生"导入动画; 从"./SplashScreenStyle"导入样式;

export default class SplashScreen extends Component {
componentDidMount() {
StatusBar.setHidden(true);
this._playAnimation();
window.setTimeout(async () => {
const token = await isSignedIn();
this.props.navigation.navigate(token ? 'HomeScreen' : 'OnBoardingScreen');
}, 2120);
}
state = {
animation: null,
};
_playAnimation = () => {
if (!this.state.animation) {
this._loadAnimationAsync();
} else {
this.animation.play();
}
};
_loadAnimationAsync = async () => {
let result = await fetch(
"https://assets1.lottiefiles.com/packages/lf20_vi3n1R.json"
)
.then(data => {
return data.json();
})
.catch(error => {
console.error(error);
});
this.setState({ animation: result }, this._playAnimation);
};
render() {

return (
<View style={styles.animationContainer}>
{this.state.animation && (
<Animation
ref={animation => {
this.animation = animation;
}}
style={{ width: 200, height: 200, backgroundColor: "transparent" }}
source={this.state.animation}
/>
)}
</View>
);
}
}