如何实现SplashScreen启动页定时关闭后跳转至Onboarding引导页？

我们需要实现的效果：先展示SplashScreen启动页，通过定时器让其在指定时长后隐藏，随后跳转至Onboarding引导页（滑动式闪屏页）。

原代码问题梳理 #

你提供的初始代码存在以下语法和逻辑错误：

• 混淆函数组件和类组件语法：定义的是函数组件，却使用了render()、this.state、this.props等仅类组件支持的写法
• 定时器未配置清除逻辑，组件提前卸载时会触发内存泄漏
• navigate('Onboarding) 缺少右引号，存在语法错误
• 跳转逻辑包裹在未执行的箭头函数内，不会触发实际页面跳转

修正后可运行代码 #

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';

import LogoImage from './LogoImage.js'
import styles from '../stylesheets/SplashStylesheet.js'

const SplashScreen = ({ navigation }) => {
  // 控制是否到跳转时间的状态
  const [timePassed, setTimePassed] = useState(false);

  useEffect(() => {
    // 1秒后更新状态，可自行修改定时器时长
    const timer = setTimeout(() => {
      setTimePassed(true);
    }, 1000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []);

  // 监听timePassed状态，满足条件时跳转
  useEffect(() => {
    if (timePassed) {
      navigation.navigate('Onboarding');
    }
  }, [timePassed, navigation]);

  // 未到时间时渲染启动页
  if (!timePassed) {
    return (
      <View style={styles.splashScreen}>
        <LogoImage/>
      </View>
    );
  }
  // 跳转阶段返回空占位即可
  return null;
}

export default SplashScreen;

内容的提问来源于stack exchange，提问作者Hiruni Liyanage