React Native安卓端自定义启动页前出现伪启动页的问题咨询

原因分析 #

• 安卓厂商定制的冷启动占位机制：部分安卓厂商（如小米、华为、OPPO等）在系统层面做了启动优化，当应用冷启动时，会先展示一个系统生成的占位页面（通常是黑色背景+应用图标），目的是让用户觉得应用“启动更快”。这个行为是厂商对原生安卓系统的定制修改，不同品牌、不同系统版本的处理逻辑不同，因此仅在特定设备上出现。
• React Native的启动特性：RN应用启动时需要加载JS引擎、初始化原生运行环境，这个过程比原生安卓应用耗时更长，系统会触发上述占位页，直到RN的自定义启动页完成渲染并显示。

解决办法 #

无法直接禁用所有设备上的这个系统占位页，但可以通过以下方式让它和你的自定义启动页无缝衔接，消除用户的感知：

1. 配置系统占位页与自定义启动页一致

   • 在android/app/src/main/res/drawable目录下创建（或修改）launch_screen.xml，设置成和你自定义启动页完全相同的布局（比如背景图、应用logo等），示例：

     <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
         <item android:drawable="@color/your_launch_bg_color" />
         <item>
             <bitmap
                 android:gravity="center"
                 android:src="@mipmap/your_app_logo" />
         </item>
     </layer-list>
     

   • 修改android/app/src/main/res/values/styles.xml中的启动主题，将窗口背景指向这个drawable：

     <style name="AppTheme.Launcher" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:windowBackground">@drawable/launch_screen</item>
         <item name="android:windowFullscreen">true</item>
     </style>
     

   • 在AndroidManifest.xml中，将启动Activity的android:theme设置为这个启动主题：

     <activity
         android:name=".MainActivity"
         android:theme="@style/AppTheme.Launcher"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
     </activity>
     

2. RN启动完成后切换回应用正常主题

   • 在MainActivity.java（或MainActivity.kt）的onCreate方法中，先切换到应用的正常主题，再执行其他初始化逻辑：
     （Java版本）

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // 切换到正常应用主题
         setTheme(R.style.AppTheme);
         super.onCreate(savedInstanceState);
     }
     

     （Kotlin版本）

     override fun onCreate(savedInstanceState: Bundle?) {
         setTheme(R.style.AppTheme)
         super.onCreate(savedInstanceState)
     }
     

通过以上配置，系统生成的占位页会和你的自定义启动页视觉上完全一致，用户就不会察觉到中间的切换过程。

内容的提问来源于stack exchange，提问作者Mayur Prajapati - MeProgrammer