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中的启动画面

1 个答案: