iPhone X初始化时显示两个不同启动屏的问题排查

我之前也碰到过类似的启动屏乌龙问题，结合你描述的细节，咱们可以从这几个方向排查解决：

1. 排查Xcode原生启动图与插件的冲突 #

你同时配置了Xcode原生LaunchImage和cordova-plugin-splashscreen插件，这大概率是重复显示的核心原因：

• iOS系统会先加载Xcode里配置的原生启动图，也就是你看到的第一张正常尺寸的图；
• 紧接着Cordova的splashscreen插件会自动加载它管理的启动图，如果这张图的尺寸适配没做好（比如没对应iPhone X的1125x2436分辨率），就会出现尺寸过大超出页面的情况。

解决思路二选一：

• 要么移除cordova-plugin-splashscreen插件，完全依赖Xcode的原生启动图配置；
• 要么删除Xcode里的原生启动图设置，全靠插件管理。如果选后者，一定要在config.xml里精准配置iPhone X的启动图：

  <splash src="res/screen/ios/Default-1125h.png" width="1125" height="2436" ios:width="1125" ios:height="2436" />
  

2. 关闭插件的自动显示默认行为 #

虽然你没手动调用navigator.splashscreen.show()，但cordova-plugin-splashscreen默认会在应用启动时自动弹出启动屏，这就是第二次显示的触发点。可以在config.xml里禁用这个默认行为：

<preference name="AutoHideSplashScreen" value="false" />

之后在你的JS代码里，等应用完全初始化完成后，再手动调用navigator.splashscreen.hide()，就能彻底避免重复显示。

3. 清理缓存并重建项目 #

旧的启动图缓存很容易留在项目里搞事情，试试这些操作：

• 打开Xcode，点击顶部菜单栏Xcode→Preferences→Locations，点击Derived Data旁的箭头，删除对应项目的文件夹；
• 在Cordova项目根目录执行命令重建：

  cordova clean ios
  cordova build ios
  

• 模拟器也重置下内容：顶部菜单栏Device→Erase All Content and Settings...

4. 检查启动图的安全区域适配 #

iPhone X及后续机型有刘海和底部安全区，如果启动图没适配这个规范，也可能出现拉伸或显示异常：

• 确保启动图是按照1125x2436的分辨率制作，且重要内容避开刘海、底部小黑条区域；
• 不要用旧的非全面屏尺寸图片强行适配，否则会被系统拉伸导致超出页面。

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