Create-React-App 中的启动屏幕

我正在使用 create-react-app 来设计 PWA。应用程序提供的默认启动屏幕是一个图标（位于屏幕中间）以及该图标下方的应用程序名称。图标和名称必须在清单文件中提供。

问题：有没有什么方法可以自定义启动画面而不是使用默认的启动画面？

以下是可能的解决方案，但正在寻找更好的方法来做到这一点。

可能的解决方案：

1. 添加启动屏幕组件。

2. 在主组件上，渲染 Splash Screen 组件，直到从服务器返回 API 响应。我在用renderSplashscreen渲染状态SplashScreen成分。

   // Component for Splash Screen
   class SplashScreen extends React.Component {
     render() {
       const style = {top: 0,
         bottom: 0,
         right: 0,
         left: 0,
         position: 'fixed'};
   
       return (
         <img src={'IMAGE-URL'} style={style}/>
       );
     }
   }
   
   class MainComponent extends React.Component {
     constructor(props) {
       this.state = {
         renderSplashscreen: true
       };
     }
   
     apiCallback(data) {
       // After getting the API response from server
       this.setState({renderSplashscreen: false});
     }
   
     render() {
       let view;
   
       if(this.state.renderSplashscreen)
         return <SplashScreen/>;
       else
         return <OtherComponent/>
     }
   }
   

这是我自己的可能的解决方案在问题中添加，就目前而言，这是唯一有效的解决方案。

1. 添加启动屏幕组件。

2. 在主组件上，渲染 Splash Screen 组件，直到从服务器返回 API 响应。我在用renderSplashscreen渲染状态SplashScreen成分。

   // Component for Splash Screen
   class SplashScreen extends React.Component {
     render() {
       const style = {top: 0,
         bottom: 0,
         right: 0,
         left: 0,
         position: 'fixed'};
   
       return (
         <img src={'IMAGE-URL'} style={style}/>
       );
     }
   }
   
   class MainComponent extends React.Component {
     constructor(props) {
       this.state = {
         renderSplashscreen: true
       };
     }
   
     apiCallback(data) {
       // After getting the API response from server
       this.setState({renderSplashscreen: false});
     }
   
     render() {
       let view;
   
       if(this.state.renderSplashscreen)
         return <SplashScreen/>;
       else
         return <OtherComponent/>
     }
   }