Create-React-App 中的启动画面

Question

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

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

以下是可能的解决方案，但正在寻找更好的方法。

可能的解决方案：

为启动画面添加一个组件。

在主要组件上，呈现 SplashScreen 组件，直到从服务器返回 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/>
  }
}

Answer 1

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

为启动画面添加一个组件。

在主要组件上，呈现 SplashScreen 组件，直到从服务器返回 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/>
  }
}

Create-React-App 中的启动画面

Splash screen in Create-React-App

facebook

reactjs

progressive-web-apps

create-react-app

pwa