做React Native项目给Android添加启动页时,发现在程序启动之前有两秒左右的白屏,给用户一种错觉,app很卡,用户体验很差。通过各种查找,发现以下原因导致:
第一,android原生原因,在冷启动(进程杀死后启动)时候,需要重新创建、初始化进程,之后才加载activity,渲染界面等。在进程的创建和初始化中,势必会消耗一些时间,在这个时间里,WindowManager会先加载APP里的主题样式里的窗口背景(windowBackground)作为预览元素,然后才去真正的加载布局。而默认背景又是白色或者黑色的。
第二,react-native App 冷启动后,或者从Android原生界面第一次跳转到React Native界面时,会有短暂的白屏过程,然后才会加载出界面。下次再跳转就不会出现类似问题。并且当我们杀死应用,重新启动App从Android Activity跳转到RN界面,依然会出现短暂白屏。这是react native的渲染机制是对于JsBundle的加载。项目中所有的js文件最终会被打包成一个JsBundle文件,android环境下Bundle文件为:‘index.android.bundle’。系统在第一次渲染界面时,会首先加载JsBundle文件。加载JsBundle比较耗时,此时还是给用户呈现的windowBackground元素。
由于从启动到渲染出界面这段时间,呈现给用户的都是windowBackground元素,所以,我们可以再该元素上做文章。
首先,在manifest文件中给application设置theme属性,them中添加windowBackground 属性,如下图
最开始用一张图片作为windowBackground ,但是会被拉升在不同手机上效果不太好,尤其最后需要适配屏幕旋转,果断放弃图片,最后用xml代替,背景填充白色图片,中间部分用透明的图片但是因为是浮在上层,切图时需要底部预留一些留白,最好是底部icon的大小,测试结果完美。