使用Ionic React + Capacitor开发安卓应用时启动屏显示两次求助

1. 校验Capacitor全局配置 #

• 打开项目根目录下的capacitor.config.ts（或capacitor.config.js），检查SplashScreen插件配置项：

  import { CapacitorConfig } from '@capacitor/cli';
  
  const config: CapacitorConfig = {
    plugins: {
      SplashScreen: {
        // 如果你需要手动控制启动屏隐藏时机，必须将该值设为false
        launchAutoHide: false,
        // 禁止同时设置非0的launchShowDuration和手动调用SplashScreen.show()
        // launchShowDuration: 3000, 如有该行请注释或删除
        showSpinner: false,
        androidScaleType: "CENTER_CROP"
      }
    }
  };
  
  export default config;
  

• 修改配置后必须执行npx cap sync android同步配置到原生项目，否则修改不生效。

2. 清理React层启动屏调用逻辑 #

启动屏二次显示90%的场景都是因为代码里多次调用了SplashScreen.show()方法，请按以下规则校验代码：

• 全局仅保留一处启动屏控制逻辑，推荐放在根组件App.tsx的空依赖useEffect中，避免重复执行：

  import { SplashScreen } from '@capacitor/splash-screen';
  import { useEffect } from 'react';
  
  function App() {
    useEffect(() => {
      const init = async () => {
        // 此处执行全局初始化逻辑：登录态校验、静态资源预加载等
        await initGlobalSettings();
        // 全部初始化完成后仅调用一次hide，全程不要额外调用show方法
        await SplashScreen.hide();
      };
      init();
    }, []); // 依赖项必须为空，避免组件重复渲染触发多次执行
  
    // 其余业务逻辑...
  }
  

• 检查路由守卫、子组件、懒加载回调中是否有重复调用SplashScreen.show()的代码，全部删除。

3. 检查安卓原生主题配置 #

如果同时配置了原生主题的启动背景和Capacitor启动屏插件，会出现两层启动屏依次显示的情况：

• 打开android/app/src/main/res/values/styles.xml，检查App主题配置，删除自定义的windowBackground属性：

  <!-- 错误配置示例，如有请删除windowBackground行 -->
  <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
      <item name="windowBackground">@drawable/splash</item>
  </style>
  

• 不需要手动修改原生主题的启动背景，Capacitor的SplashScreen插件会自动处理资源加载。

4. 排查插件冲突 #

如果同时安装了Ionic Native的启动屏插件和Capacitor官方的启动屏插件，会触发逻辑冲突：

• 执行命令卸载非官方插件：

  npm uninstall @ionic-native/splash-screen
  npx cap sync android
  

内容的提问来源于stack exchange，提问作者RameshN