Android端React Native：保持启动屏至Bundle加载完成（无第三方库）

嘿，这个问题我之前帮不少开发者解决过——不用第三方库完全可以搞定，核心思路就是让主Activity在JS加载完成前，先显示和启动屏一模一样的内容，无缝衔接过去，就不会有白屏闪了。下面是具体的步骤，都是基于React Native官方推荐的原生技巧：

1. 复用启动屏资源，统一视觉 #

白屏的根源是主Activity启动后默认是空白布局，直到JS渲染完成才显示内容。所以第一步要让主Activity的初始界面和启动屏完全一致：

方式一：用Drawable作为窗口背景（适合简单启动屏） #

如果你的启动屏是纯色+居中logo这类简单布局，直接在res/drawable下创建一个splash_background.xml（和启动屏的布局逻辑一致）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 和启动屏一致的背景色 -->
    <item android:drawable="@color/splash_bg" />
    <!-- 居中显示的启动屏logo -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_logo" />
    </item>
</layer-list>

然后修改主Activity的主题（res/values/styles.xml），把窗口背景设置为这个Drawable：

<style name="MainTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 其他主题配置保持不变 -->
    <item name="android:windowBackground">@drawable/splash_background</item>
    <!-- 去掉窗口切换动画，避免闪烁 -->
    <item name="android:windowAnimationStyle">@null</item>
</style>

方式二：复用启动屏布局（适合复杂启动屏） #

如果你的启动屏是带多控件的复杂布局，直接在主Activity的布局文件里复用启动屏的布局：
修改res/layout/activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 复用启动屏的布局文件 -->
    <include layout="@layout/splash_screen" android:id="@+id/splash_container" />

    <!-- React Native的根视图 -->
    <com.facebook.react.ReactRootView
        android:id="@+id/react_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

2. 优化启动屏到主Activity的切换动画 #

在启动屏Activity跳转到主Activity时，去掉默认的切换动画，避免视觉断层：

// SplashActivity.java中启动主Activity的代码
Intent intent = new Intent(SplashActivity.this, MainActivity.class);
// 去掉Activity切换动画
intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
startActivity(intent);
finish();
// 同时覆盖默认的过渡动画
@Override
public void onPause() {
    super.onPause();
    overridePendingTransition(0, 0);
}

3. JS加载完成后，移除启动屏内容 #

等React Native的JS Bundle加载完成、App渲染就绪后，再把主Activity里的启动屏内容去掉，让RN的界面显示出来。

原生端监听JS加载完成（推荐） #

在MainActivity.java里监听React Context初始化完成的事件，自动移除启动屏：

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactContext;
import android.view.View;

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 获取React实例管理器，监听JS加载完成事件
        ReactInstanceManager reactInstanceManager = ((ReactApplication) getApplication()).getReactNativeHost().getReactInstanceManager();
        reactInstanceManager.addReactInstanceEventListener(new ReactInstanceManager.ReactInstanceEventListener() {
            @Override
            public void onReactContextInitialized(ReactContext context) {
                runOnUiThread(() -> {
                    // 方式一：如果用的是windowBackground，清空背景
                    getWindow().setBackgroundDrawable(null);
                    
                    // 方式二：如果用的是复用布局，隐藏启动屏容器
                    // findViewById(R.id.splash_container).setVisibility(View.GONE);
                });
                // 移除监听，避免内存泄漏
                reactInstanceManager.removeReactInstanceEventListener(this);
            }
        });
    }

    // ...其他默认方法（比如getMainComponentName）
}

或者JS端主动通知原生（灵活度更高） #

如果需要在App的某个特定时机（比如首页渲染完成）才隐藏启动屏，可以写一个极简的NativeModule：

1. 创建SplashScreenHelperModule.java：

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.view.View;

public class SplashScreenHelperModule extends ReactContextBaseJavaModule {

    public SplashScreenHelperModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "SplashScreenHelper";
    }

    @ReactMethod
    public void hideSplash() {
        if (getCurrentActivity() != null) {
            getCurrentActivity().runOnUiThread(() -> {
                // 根据你的实现方式二选一
                getCurrentActivity().getWindow().setBackgroundDrawable(null);
                // findViewById(R.id.splash_container).setVisibility(View.GONE);
            });
        }
    }
}

2. 创建对应的Package类SplashScreenHelperPackage.java：

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.List;

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

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return new ArrayList<>();
    }
}

3. 在MainApplication.java里注册这个Package：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 添加自定义Package
    packages.add(new SplashScreenHelperPackage());
    return packages;
}

4. JS端调用（比如在首页的useEffect或componentDidMount里）：

import { useEffect, Platform, NativeModules } from 'react-native';

const App = () => {
    useEffect(() => {
        if (Platform.OS === 'android') {
            // 等首页渲染完成后隐藏启动屏
            NativeModules.SplashScreenHelper.hideSplash();
        }
    }, []);

    return (
        // 你的App内容
    );
};

export default App;

这样一套操作下来，启动屏到RN界面的过渡完全无缝，不会出现白屏闪烁，而且完全没有依赖第三方库，都是用React Native和Android原生的基础API实现的。

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