? ? ? 做React Native項目給Android添加啟動頁時，發(fā)現(xiàn)在程序啟動之前有兩秒左右的白屏，給用戶一種錯覺，app很卡，用戶體驗很差。通過各種查找，發(fā)現(xiàn)以下原因?qū)е拢?/p>

?第一，android原生原因，在冷啟動（進程殺死后啟動）時候，需要重新創(chuàng)建、初始化進程，之后才加載activity，渲染界面等。在進程的創(chuàng)建和初始化中，勢必會消耗一些時間，在這個時間里，WindowManager會先加載APP里的主題樣式里的窗口背景（windowBackground）作為預(yù)覽元素，然后才去真正的加載布局。而默認(rèn)背景又是白色或者黑色的。

第二，react-native App 冷啟動后，或者從Android原生界面第一次跳轉(zhuǎn)到React Native界面時，會有短暫的白屏過程，然后才會加載出界面。下次再跳轉(zhuǎn)就不會出現(xiàn)類似問題。并且當(dāng)我們殺死應(yīng)用，重新啟動App從Android Activity跳轉(zhuǎn)到RN界面，依然會出現(xiàn)短暫白屏。這是react native的渲染機制是對于JsBundle的加載。項目中所有的js文件最終會被打包成一個JsBundle文件，android環(huán)境下Bundle文件為：‘index.android.bundle’。系統(tǒng)在第一次渲染界面時，會首先加載JsBundle文件。加載JsBundle比較耗時，此時還是給用戶呈現(xiàn)的windowBackground元素。

由于從啟動到渲染出界面這段時間，呈現(xiàn)給用戶的都是windowBackground元素，所以，我們可以再該元素上做文章。

首先，在manifest文件中給application設(shè)置theme屬性，them中添加windowBackground 屬性，如下圖

最開始用一張圖片作為windowBackground ，但是會被拉升在不同手機上效果不太好，尤其最后需要適配屏幕旋轉(zhuǎn)，果斷放棄圖片，最后用xml代替，背景填充白色圖片，中間部分用透明的圖片但是因為是浮在上層，切圖時需要底部預(yù)留一些留白，最好是底部icon的大小，測試結(jié)果完美。