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

Question

在初始化模板“tabs”Expo 项目后，React Native 应用程序的启动例程如下所示：

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();
}, []);

Expo's documentation关于让“启动画面停留更长时间”的简单演示：

import { SplashScreen } from 'expo';

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

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

Answer 1

尝试“componentDidMount”生命周期函数。 react-lifecycle-methods-diagram

这是一个想法：

1. 首先渲染启动画面，在 启动画面的“componentDidMount”函数，开始渲染 下一个屏幕/背景部分/附加部分。
2. 一旦下一个屏幕/背景类/附加类是 渲染，在此类的 'componentDidMount' 中，更新 state 中的标志（splash 类或全局存储，如 redux/mobox）以通知 启动画面“准备就绪”。
3. 最后，在启动画面中，创建一个计时器，例如 2 秒，每 100 毫秒检查一次标志状态，如果它准备好了， 那就走吧。

顺便说一句，如果下一个屏幕的加载速度不是那么慢，我认为这有点过分了。