React Native+Expo：等待时间后和页面完成时启动屏幕关闭

Question

初始化模板“Tabs”Expo项目后,React原生应用程序的启动例程如下所示：

React.useEffect(() => {
  async function loadResourcesAndDataAsync() {
    try {
      SplashScreen.preventAutoHide();

      // Load our initial navigation state
      setInitialNavigationState(await getInitialState());

      // Load fonts
      await Font.loadAsync({
        ...Ionicons.font,
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      });
    } catch (e) {
      // We might want to provide this error information to an error reporting service
      console.warn(e);
    } finally {
      setLoadingComplete(true);

      SplashScreen.hide();
    }
  }

  loadResourcesAndDataAsync();
}, []);

世博关于让“闪屏持续更长时间”的文件简单地说明：

import { SplashScreen } from 'expo';

SplashScreen.preventAutoHide();
setTimeout(SplashScreen.hide, 5000);

问题是，如果背景/下一个视图仍在呈现，我希望启动屏幕保持不变，而不是简单地等待任意的时间。例如，如果渲染时间需要0.2秒，而我希望启动页面打开2秒，我希望启动页面在2秒后关闭。如果渲染时间需要2.8秒，我希望启动页面保持2.8秒。实现这一点的最佳方法是什么？

Answer 1

尝试“ComponentDidMount”生命周期函数。反应-生命周期-方法-图

这里有这样的想法：

1. 首先呈现初始屏幕，在初始屏幕的“组件未安装”功能中，开始呈现下一个屏幕/背景部分/附加部分。
2. 一旦呈现下一个屏幕/背景类/附加类，在该类的“Component DidMount”中，更新状态（初始类或全局存储（如redux/mobox））中的标志，以通知初始屏幕“它”准备就绪。
3. 最后，在启动屏幕中，创建一个计时器，例如2秒后，每隔100ms检查一次标志的状态，如果它准备就绪，则执行。

顺便说一下，如果下一个屏幕加载不是那么慢的话，在我看来这有点过于熟练了。