如何用JavaScript启动屏衔接原生启动屏并保持视觉一致？

核心原则 #

不要硬编码尺寸和位置，必须基于原生启动屏的真实渲染参数来配置JS端启动屏，这是解决匹配问题的关键。

一、复用同一张启动屏图片 #

• 直接使用原生启动屏的原始图片文件（比如iOS的LaunchImage、Android的drawable目录下的图片）放到JS静态资源目录，避免因图片压缩、格式转换导致的显示差异。
• 注意DPI适配：不同平台会根据设备DPI加载对应分辨率的图片，JS端直接引用原生端实际使用的那版图片即可（比如2x/3x图）。

二、获取原生启动屏的真实布局参数 #

不同框架的实现方式不同，核心是通过原生桥接拿到启动屏的宽、高、顶部偏移、左侧偏移：

Cordova/PhoneGap 场景 #

• 可以自定义简单原生插件，或者扩展cordova-plugin-splashscreen，暴露获取启动屏信息的API：

// JS端调用示例
window.plugins.customSplash.getInfo(function(splashInfo) {
  initJSSplash(splashInfo);
});

原生端需要返回当前启动屏的实际渲染坐标（比如iOS通过UIScreen和启动屏视图的frame获取，Android通过WindowManager获取启动屏的布局参数）。

React Native 场景 #

• 通过NativeModules调用自定义原生模块获取尺寸：

import { NativeModules } from 'react-native';
const { SplashHelper } = NativeModules;

SplashHelper.getSplashLayout().then(layout => {
  setupJSSplash(layout);
});

三、JS端启动屏的精确布局 #

拿到参数后，用绝对定位+CSS变量实现完全匹配：

#js-splash {
  position: fixed;
  top: var(--splash-top);
  left: var(--splash-left);
  width: var(--splash-width);
  height: var(--splash-height);
  background: url('splash-original.png') no-repeat center;
  background-size: cover; /* 和原生启动屏的缩放方式保持一致 */
  z-index: 99999;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

JS动态注入参数：

function initJSSplash(splashInfo) {
  const root = document.documentElement;
  root.style.setProperty('--splash-top', `${splashInfo.top}px`);
  root.style.setProperty('--splash-left', `${splashInfo.left}px`);
  root.style.setProperty('--splash-width', `${splashInfo.width}px`);
  root.style.setProperty('--splash-height', `${splashInfo.height}px`);
  
  // 先显示JS启动屏，再隐藏原生启动屏
  document.getElementById('js-splash').style.display = 'block';
  if (navigator.splashscreen) navigator.splashscreen.hide();
}

四、无缝切换的时机控制 #

• 必须在原生启动屏即将隐藏前显示JS启动屏，比如在Cordova的deviceready事件触发前，或者原生端主动发送通知给JS；
• 绝对不能等页面DOM加载完成后再显示JS启动屏，否则会出现明显的闪屏间隙。

五、常见问题修复 #

• 图片变形：检查background-size是否和原生启动屏的缩放逻辑一致（原生常用cover或contain，对应设置即可）；
• 状态栏偏移：确保JS页面的viewport设置和原生一致，比如iOS添加viewport-fit=cover，Android设置全屏模式；
• 横屏适配：监听orientationchange事件，重新获取原生启动屏的布局参数并更新JS启动屏样式。

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