React Native中如何移除启动时默认出现的白屏？

你遇到的白屏问题是因为自定义SplashScreen是JS层面的组件，需要等React Native的JS环境初始化完成后才会渲染，而APP启动的最初阶段是原生系统加载应用资源，这时候还没到JS执行环节，所以会显示原生默认的空白屏幕。要解决这个问题，需要给iOS和Android分别配置与你的自定义Splash样式一致的原生启动页，实现无缝过渡。

一、iOS端配置 #

1. 打开项目的Xcode工程，找到LaunchScreen.storyboard文件
2. 编辑启动页布局，完全匹配你的自定义SplashScreen样式：
   • 添加ImageView作为背景，设置为你用的backgroundImage，调整约束让它铺满整个屏幕
   • 添加另一个ImageView放置triangleLogo，设置宽高为300x300，居中对齐（和你React组件中的布局一致）
3. 确保布局适配不同屏幕尺寸，保存后重新编译运行iOS项目。

二、Android端配置 #

1. 准备启动页资源 #

将你的背景图和logo图片放入res/drawable（或对应分辨率的mipmap文件夹）中。

2. 创建启动页背景布局文件 #

在res/drawable下新建splash_background.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 背景层，对应你的ImageBackground -->
    <item android:drawable="@drawable/background_image" />
    <!-- Logo层，居中显示，尺寸与React组件一致 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/triangle_logo"
            android:width="300dp"
            android:height="300dp"/>
    </item>
</layer-list>

3. 配置启动页主题 #

打开res/values/styles.xml，添加启动页专属主题：

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_background</item>
    <item name="android:windowFullscreen">true</item> <!-- 全屏显示，和你的Splash一致 -->
</style>

4. 关联主题到MainActivity #

修改AndroidManifest.xml，将MainActivity的默认主题替换为刚才创建的SplashTheme：

<activity
    android:name=".MainActivity"
    android:theme="@style/SplashTheme"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:exported="true"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize">
    <!-- 其他配置保持不变 -->
</activity>

5. 切换回应用主题（可选） #

如果你的应用有默认主题，在MainActivity.java的onCreate方法中，JS环境初始化完成后切换回原主题：

@Override
protected void onCreate(Bundle savedInstanceState) {
    // 先应用启动页主题
    setTheme(R.style.SplashTheme);
    super.onCreate(savedInstanceState);
    // 切换回应用默认主题（替换成你自己的主题名）
    setTheme(R.style.AppTheme);
}

三、额外优化（减少JS加载时间） #

除了原生启动页配置，还可以通过以下方式进一步缩短白屏时长：

• 启用Hermes引擎：在android/app/build.gradle中设置enableHermes=true，iOS端在Podfile中启用，提升JS加载和执行速度
• 代码分割：使用React Native的代码分割功能，按需加载非启动必需的组件
• 压缩JS bundle：打包时启用代码压缩，减小bundle体积

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