React Native安卓应用平滑闪屏过渡及重启白屏问题排查

先直接说结论：你最开始的思路方向是对的——用原生windowBackground覆盖启动空白期是安卓端解决RN白屏的标准方案，但没区分启动阶段和运行阶段的主题配置，才导致了键盘闪烁和重启白屏的后续问题。咱们一步步拆解解决：

核心思路 #

通过定义两个Android Theme：

1. 启动主题：带闪屏背景，覆盖从App启动到RN JS加载完成的空白期
2. 运行主题：背景透明，避免键盘弹出时的闪屏背景闪烁
   然后在RN初始化完成后切换到运行主题，重启时再切回启动主题。

步骤1：配置双Theme #

在android/app/src/main/res/values/styles.xml中添加两个主题：

<!-- 启动阶段用：带闪屏背景，保持和react-native-splashscreen一致 -->
<style name="AppTheme.Launch" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@layout/launch_screen_bg</item>
    <item name="android:windowSoftInputMode">adjustResize</item> <!-- 满足你的需求 -->
</style>

<!-- 运行阶段用：背景透明，避免键盘闪烁 -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 保留你原有的其他配置（比如状态栏颜色等） -->
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowSoftInputMode">adjustResize</item>
</style>

步骤2：设置启动时的默认Theme #

修改AndroidManifest.xml，让MainActivity启动时先用启动主题：

<activity
    android:name=".MainActivity"
    android:theme="@style/AppTheme.Launch"> <!-- 这里改为启动主题 -->
    <!-- 其他原有配置 -->
</activity>

步骤3：编写原生模块实现主题切换 #

我们需要在RN加载完成后，通知原生切换到运行主题；重启前再切回启动主题。

3.1 编写原生模块（ThemeChanger）

创建ThemeChangerModule.java：

package com.yourappname; // 替换成你的包名

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.UiThreadUtil;

import android.app.Activity;

public class ThemeChangerModule extends ReactContextBaseJavaModule {
    public ThemeChangerModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "ThemeChanger"; // 模块名，RN端会用到
    }

    // 切换到运行主题
    @ReactMethod
    public void setNormalTheme() {
        UiThreadUtil.runOnUiThread(() -> {
            Activity activity = getCurrentActivity();
            if (activity != null) {
                activity.setTheme(R.style.AppTheme);
                activity.getWindow().getDecorView().invalidate();
            }
        });
    }

    // 切换到启动主题（重启前调用）
    @ReactMethod
    public void setLaunchTheme() {
        UiThreadUtil.runOnUiThread(() -> {
            Activity activity = getCurrentActivity();
            if (activity != null) {
                activity.setTheme(R.style.AppTheme.Launch);
                activity.getWindow().getDecorView().invalidate();
            }
        });
    }
}

3.2 注册模块

创建ThemeChangerPackage.java：

package com.yourappname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class ThemeChangerPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ThemeChangerModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

然后在MainApplication.java的getPackages()方法中添加这个包：

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 添加下面这行
    packages.add(new ThemeChangerPackage());
    return packages;
}

步骤4：RN端调用主题切换 #

在App.js中，当RN初始化完成后切换到运行主题，并隐藏react-native-splashscreen：

import React, { useEffect } from 'react';
import { NativeModules, Platform } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import RNRestart from 'react-native-restart';

const { ThemeChanger } = NativeModules;

const App = () => {
    useEffect(() => {
        if (Platform.OS === 'android') {
            // RN加载完成后切换到透明背景的运行主题
            ThemeChanger.setNormalTheme();
        }
        // 隐藏RN层面的闪屏
        SplashScreen.hide();
    }, []);

    // 封装自定义重启方法：先切回启动主题再重启
    const restartApp = () => {
        if (Platform.OS === 'android') {
            ThemeChanger.setLaunchTheme();
            // 延迟100ms确保主题生效后重启
            setTimeout(() => RNRestart.Restart(), 100);
        } else {
            RNRestart.Restart();
        }
    };

    // 你的其他组件代码...
    return (/* ... */);
};

export default App;

解决效果验证 #

1. 低端设备启动白屏：启动时原生windowBackground直接显示闪屏，直到RN切换主题，完全覆盖JS加载空白期
2. 键盘弹出闪烁：运行阶段windowBackground是透明的，adjustResize时不会显示闪屏背景
3. react-native-restart白屏：重启前切回启动主题，重启时原生闪屏再次显示，直到RN加载完成切换主题

额外优化建议 #

• 确保launch_screen_bg的布局和react-native-splashscreen的闪屏图完全一致，避免切换时的视觉断层
• 开启Hermes引擎、压缩JS bundle、拆分懒加载组件，从根源减少低端设备的JS加载时间
• 主题切换的时机可以更精准：比如监听AppState变为active后再切换，而不是依赖useEffect的挂载时机

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