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

世博会关于让"飞溅屏幕停留更长时间"的文件简单地展示了：

import { SplashScreen } from 'expo';
SplashScreen.preventAutoHide();
setTimeout(SplashScreen.hide, 5000);

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

Answer 1

尝试"componentDidMount"生命周期函数。反应生命周期方法图

想法如下：

1. 首先在启动屏幕的"componentDidMount"功能，开始渲染下一个屏幕/背景部分/附加部分
2. 一旦下一个屏幕/背景类/附加类在该类的"componentDidMount"中，呈现更新状态(splash类或类似redux/mobox的全局存储(中的标志，以通知闪屏"一切就绪">
3. 最后，在启动屏幕中，创建一个计时器，例如2秒，每隔100毫秒检查一次处于状态的标志，如果它准备就绪，那就去吧

顺便说一句，如果下一个屏幕加载速度不是那么慢，在我看来这有点过于技巧了。