react-native在啟動(dòng)的時(shí)候會(huì)有瞬間的白屏出現(xiàn)，ios白屏?xí)r間會(huì)很短，安卓要相對(duì)長(zhǎng)一些，大概1-3s時(shí)間。這是react-native的工作機(jī)制決定的。 react-native在啟動(dòng)時(shí)會(huì)裝載js bundle到內(nèi)存并渲染界面，這段時(shí)間界面是一個(gè)空View.
上面的過(guò)程我們稱之為項(xiàng)目的初始化，那么在這段項(xiàng)目初始化的過(guò)程中我們?yōu)榱擞懈玫挠脩趔w驗(yàn)需要渲染一個(gè)對(duì)用戶友好的界面來(lái)代替白屏，畢竟白屏對(duì)用戶不太友好，你可以理解為跟h5中的loading是一個(gè)意思。然而配置原生的啟動(dòng)圖不像我們加個(gè)loading那么簡(jiǎn)單，react-native-splash-screen幫我們封裝了大部分配置，我們需要做部分的集成就可以使用，以下是配置教程：
一、下載 react-native-splash-screen:
在項(xiàng)目根目錄運(yùn)行終端執(zhí)行以下命令
yarn add react-native-splash-screen
或者
npm install react-native-splash-screen --save
特別注意 目前npm5存在安裝新庫(kù)時(shí)會(huì)刪除其他庫(kù)的問(wèn)題，導(dǎo)致項(xiàng)目無(wú)法正常運(yùn)行。請(qǐng)盡量使用yarn代替npm操作；
二、安裝：
運(yùn)行終端執(zhí)行以下命令進(jìn)行自動(dòng)安裝
react-native link react-native-splash-screen
三、配置react-native部分，在你的首頁(yè)導(dǎo)入react-native-splash-screen，在componentDidMount中執(zhí)行hide隱藏啟動(dòng)屏（當(dāng)然這不是必須的，按照你的需要在適當(dāng)?shù)臅r(shí)候隱藏它就行）：
四、配置啟動(dòng)圖：
（一） ios部分：
1、打開(kāi)ios目錄下的AppDelegate.m文件，導(dǎo)入啟動(dòng)屏包。在return之前執(zhí)行顯示啟動(dòng)屏幕。
2、用Xcode打開(kāi)ios工程，找到Image.xcassets并點(diǎn)擊選中，在空白處選擇 App Icons & Launch Images ? New ios Launch Image , 完成這步后會(huì)生成一個(gè)LaunchImage
3、選中Image.xcassets ? LaunchImage，就是上一步創(chuàng)建的LaunchImage，右側(cè)框中的部分是讓你選擇要支持的系統(tǒng)，橫豎屏之類的（這個(gè)按照需求選擇，如果你的項(xiàng)目不打算支持ios6可以不選擇）。然后點(diǎn)擊中間部分選中一個(gè)分辨率的框，上傳相應(yīng)分辨率的圖片作為啟動(dòng)屏幕（注意：這里的分辨率一定要對(duì)，如果比例不對(duì)傳不上去）
以下是選擇框中不同屏幕的分辨率：
iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2x
iPhone Portrait iOS 7,8-2x （640×960） @2x
iPhone Portrait iOS 7,8-Retina 4 （640×1136） @2x
iPhone Portrait iOS 5,6-1x （320×480） @1x
iPhone Portrait iOS 5,6-2x （640×960） @2x
iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x
4、選中LaunchScreen.xib,會(huì)有個(gè)彈出框，默認(rèn)選擇確定就行，然后把右邊的 Use Launch Screen 取消選中（因?yàn)閕os可以用來(lái)自定義圖片啟動(dòng)屏幕或通過(guò) LaunchScreen.xib花一個(gè)啟動(dòng)屏幕，ios默認(rèn)花了一個(gè)，因?yàn)槲覀冇玫氖菆D片所以要取消它）。
5、如圖選中項(xiàng)目工程，右側(cè)會(huì)出現(xiàn)工程的基本配置，設(shè)置Launch Images Srouce配置為L(zhǎng)aunchImage（如果沒(méi)有LaunchImage會(huì)彈出一個(gè)框提示拷貝圖片，按照默認(rèn)點(diǎn)確定就行），然后設(shè)置Launch Screen File為空（這個(gè)很重要）。
6、預(yù)覽效果（上傳后圖片被刪幀壓縮太狠，效果不佳，湊合看把）
（二） android部分：
1、打開(kāi)MainActivity.java按照下圖1，2，3步驟添加啟動(dòng)屏包以及方法：
2、在 android/app/src/mian/res目錄下創(chuàng)建layout文件夾，并在創(chuàng)建的layout文件夾中創(chuàng)建launch_screen.xml
launch_screen.xml文件內(nèi)容如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/launch_screen">
</LinearLayout>
3、在 android/app/src/mian/res目錄下創(chuàng)建drawable-xhdpi文件夾，并添加名為launch_screen.png的圖片（其實(shí)你要想適配的更全面可以像mipmap一樣添加不同分辨率的圖片）
4、預(yù)覽效果
但是感覺(jué)還是優(yōu)點(diǎn)瑕疵，還是有一瞬間的白屏，這時(shí)候需要在android/app/src/main/res/values/styles.xml中添加 <item name="android:windowIsTranslucent">true</item> 設(shè)置透明背景
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!--設(shè)置透明背景-->
<item name="android:windowIsTranslucent">true</item>
</style>
</resources>
接下來(lái)看下設(shè)置透明背景后的效果
完美收官！
項(xiàng)目demo地址：https://github.com/duheng/Mozi
THE END！
