ReactNative 启动屏优化

最新推荐文章于 2025-09-22 15:41:42 发布

原创最新推荐文章于 2025-09-22 15:41:42 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #react native

ReactNative 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了ReactNative应用在Android和iOS平台上的启动屏优化方法。针对Android启动过程中的白屏问题，提供了多种解决方案，包括设置透明背景、固定颜色背景、使用背景图片及自定义layer-list等。同时，讨论了iOS平台的背景设置方法，并提醒开发者注意屏幕适配及键盘弹起时的背景闪烁问题。

ReactNative 启动屏优化

android启动屏会有一段时间的白屏，因为这段时间的启动过程中先使用windowbackground的颜色，然后再启动到mainactivity。
优化方法：
1.设置windowbackground的背景为空，表现为启动时会先有种点击了卡住的感觉，因为此时应以已启动，但因为是透明的所以看不到。
2.给设置背景颜色这种会更友好一点
3.使用背景图片，这个适配不同的手机会有问题，图片会拉伸变形
4.使用layer-list 去自定义背景的，图片可以设置大小，背景可以使用图片或者其他元素

ios: 设置LaunchScreen即可。

问题：注意andoird ios 背景的显示效果有差别,注意屏幕适配问题，然后就是android设置背景后，键盘弹起会有背景的颜色闪烁，可以编写原生方法去修复。

/**设置背景颜色*/
@ReactMethod
public void setWindowBackgroundWhite(){
    Activity currentActivity = getCurrentActivity();
    currentActivity.runOnUiThread(new Runnable() {
        @Override
        public void run() {
            currentActivity.getWindow().setBackgroundDrawable(new ColorDrawable(currentActivity.getResources().getColor(R.color.white)));
        }
    });

}

总结：优化白屏的方法不管ios还是android，主要就是设置启动背景，最好的显示效果就是让图片居中，加背景。