React Native中是否支持在运行时动态修改启动页SplashScreen？

首先明确前提：系统冷启动最初的数百毫秒内展示的资源是读取的应用预置静态配置，运行时无法修改，所有方案都是针对应用进程启动后的启动页展示环节做适配，避免闪屏的核心思路是把原生预置的静态启动页和动态启动页的背景风格对齐。

原生端实现方案（性能最优） #

iOS 端 #

• 先把预置的LaunchScreen.storyboard调整为和自定义启动页背景一致的纯色/极简占位，减少切换时的感知差
• 应用启动回调didFinishLaunchingWithOptions中新增顶层Window承载自定义启动页：

// 读取沙箱内缓存的自定义启动图
NSString *splashPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES).firstObject stringByAppendingPathComponent:@"custom_splash.png"];
UIImage *splashImage = [UIImage imageWithContentsOfFile:splashPath] ?: [UIImage imageNamed:@"default_splash"];
// 新建全屏启动页Window，层级高于主Window
UIWindow *splashWindow = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
splashWindow.windowLevel = UIWindowLevelAlert + 1;
UIViewController *splashVC = [UIViewController new];
UIImageView *splashImageView = [[UIImageView alloc] initWithFrame:splashVC.view.bounds];
splashImageView.image = splashImage;
splashImageView.contentMode = UIViewContentModeScaleAspectFill;
[splashVC.view addSubview:splashImageView];
splashWindow.rootViewController = splashVC;
[splashWindow makeKeyAndVisible];
// 存为全局属性避免被释放
self.splashWindow = splashWindow;
// 待JS侧初始化完成/固定展示时长到后，销毁window即可
// [self.splashWindow removeFromSuperview];
// self.splashWindow = nil;

• 动态替换逻辑：用户修改启动图时，将选中的图片写入上述固定沙箱路径，下次启动自动生效。

Android 端 #

• 修改AndroidManifest.xml中启动主题的windowBackground为纯色/极简占位，设置SplashActivity为启动入口：

<activity
    android:name=".SplashActivity"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

• SplashActivity中加载自定义启动图：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 读取沙箱内自定义启动图
    val splashFile = File(filesDir, "custom_splash.png")
    val splashBitmap = if (splashFile.exists()) {
        BitmapFactory.decodeFile(splashFile.absolutePath)
    } else {
        BitmapFactory.decodeResource(resources, R.drawable.default_splash)
    }
    // 全屏展示启动图
    val imageView = ImageView(this)
    imageView.setImageBitmap(splashBitmap)
    imageView.scaleType = ImageView.ScaleType.CENTER_CROP
    setContentView(imageView)
    // 启动完成后跳转主页面
    Handler(Looper.getMainLooper()).postDelayed({
        startActivity(Intent(this, MainActivity::class.java))
        finish()
    }, 2000) // 可调整为和iOS一致的展示逻辑，比如监听JS侧回调再跳转
}

JS 层实现方案（改造成本最低） #

如果不需要极致的启动体验，可直接用JS侧方案，无需修改原生代码：

• 把原生预置的SplashScreen调整为纯色背景，减少闪屏
• 根组件优先渲染全屏启动图组件，从本地缓存读取自定义启动图资源，待应用初始化完成后隐藏启动组件：

import { Image, View } from 'react-native';
import RNFS from 'react-native-fs';

const App = () => {
  const [showSplash, setShowSplash] = useState(true);
  const [splashUri, setSplashUri] = useState('');

  useEffect(() => {
    // 读取本地缓存的启动图
    const loadSplash = async () => {
      const customSplashPath = `${RNFS.DocumentDirectoryPath}/custom_splash.png`;
      const exists = await RNFS.exists(customSplashPath);
      setSplashUri(exists ? `file://${customSplashPath}` : require('./default_splash.png'));
      // 模拟初始化完成后隐藏启动页
      setTimeout(() => setShowSplash(false), 2000);
    };
    loadSplash();
  }, []);

  if (showSplash) {
    return (
      <View style={{ flex: 1 }}>
        <Image 
          source={{ uri: splashUri }} 
          style={{ width: '100%', height: '100%' }}
          resizeMode="cover"
        />
      </View>
    );
  }

  // 渲染应用主内容
  return <MainStack />;
};

注：JS层方案的启动页会比原生方案晚数百毫秒出现，冷启动阶段会先展示原生的纯色占位，再展示JS层启动图，适合对启动体验要求不高的场景。

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