Create-React-App中的启动画面

Question

I'm using create-react-app to design a PWA. The default Splash screen provided by the App is an icon (in middle of the screen) and a name of the app below that icon. Icon & name must be provided in the manifest file.

Question: Is there any way to customize the Splash Screen instead of using the default one?

Following is the possible solution but searching for a better way to do that.

Possible Solution:

1. Add a component for Splash Screen.

2. On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.

    // 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/> } } 

Answer 1

Here's my own possible solution added in the question, as for now, this is the only solution that works well.

1. Add a component for Splash Screen.

2. On the main component, render SplashScreen component untill the API response is returned from the server. I am using renderSplashscreen state for rendering the SplashScreen component.

    // 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/> } }