react-native在啟動的時候會有瞬間的白屏出現(xiàn)煤辨，ios白屏?xí)r間會很短称鳞，安卓要相對長一些纤壁，大概1-3s時間雅镊。這是react-native的工作機制決定的襟雷。 react-native在啟動時會裝載js bundle到內(nèi)存并渲染界面，這段時間界面是一個空View.
上面的過程我們稱之為項目的初始化仁烹，那么在這段項目初始化的過程中我們?yōu)榱擞懈玫挠脩趔w驗需要渲染一個對用戶友好的界面來代替白屏耸弄，畢竟白屏對用戶不太友好，你可以理解為跟h5中的loading是一個意思卓缰。然而配置原生的啟動圖不像我們加個loading那么簡單计呈，react-native-splash-screen幫我們封裝了大部分配置砰诵，我們需要做部分的集成就可以使用，以下是配置教程：
一捌显、下載 react-native-splash-screen:
在項目根目錄運行終端執(zhí)行以下命令
yarn add react-native-splash-screen
或者
npm install react-native-splash-screen --save
特別注意 目前npm5存在安裝新庫時會刪除其他庫的問題茁彭，導(dǎo)致項目無法正常運行。請盡量使用yarn代替npm操作扶歪；
二理肺、安裝：
運行終端執(zhí)行以下命令進行自動安裝
react-native link react-native-splash-screen
三、配置react-native部分击罪，在你的首頁導(dǎo)入react-native-splash-screen哲嘲，在componentDidMount中執(zhí)行hide隱藏啟動屏（當然這不是必須的，按照你的需要在適當?shù)臅r候隱藏它就行）：
四媳禁、配置啟動圖：
（一） ios部分：
1、打開ios目錄下的AppDelegate.m文件画切，導(dǎo)入啟動屏包竣稽。在return之前執(zhí)行顯示啟動屏幕。
2抚岗、用Xcode打開ios工程挂据，找到Image.xcassets并點擊選中熄捍，在空白處選擇 App Icons & Launch Images ? New ios Launch Image , 完成這步后會生成一個LaunchImage
3、選中Image.xcassets ? LaunchImage岛宦，就是上一步創(chuàng)建的LaunchImage，右側(cè)框中的部分是讓你選擇要支持的系統(tǒng)耍缴，橫豎屏之類的（這個按照需求選擇砾肺，如果你的項目不打算支持ios6可以不選擇）。然后點擊中間部分選中一個分辨率的框防嗡，上傳相應(yīng)分辨率的圖片作為啟動屏幕（注意：這里的分辨率一定要對变汪，如果比例不對傳不上去）
以下是選擇框中不同屏幕的分辨率：
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,會有個彈出框蚁趁，默認選擇確定就行裙盾，然后把右邊的 Use Launch Screen 取消選中（因為ios可以用來自定義圖片啟動屏幕或通過 LaunchScreen.xib花一個啟動屏幕，ios默認花了一個他嫡，因為我們用的是圖片所以要取消它）番官。
5、如圖選中項目工程钢属，右側(cè)會出現(xiàn)工程的基本配置徘熔，設(shè)置Launch Images Srouce配置為LaunchImage（如果沒有LaunchImage會彈出一個框提示拷貝圖片，按照默認點確定就行）署咽，然后設(shè)置Launch Screen File為空（這個很重要）近顷。
6生音、預(yù)覽效果（上傳后圖片被刪幀壓縮太狠，效果不佳窒升，湊合看把）
（二） android部分：
1缀遍、打開MainActivity.java按照下圖1，2饱须，3步驟添加啟動屏包以及方法：
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的圖片（其實你要想適配的更全面可以像mipmap一樣添加不同分辨率的圖片）
4、預(yù)覽效果
但是感覺還是優(yōu)點瑕疵酪呻，還是有一瞬間的白屏减宣，這時候需要在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>
接下來看下設(shè)置透明背景后的效果
完美收官！
項目demo地址：https://github.com/duheng/Mozi
THE END玩荠！
