react-native-splash-screen集成實踐（ios & android）

react-native在啓動的時候會有瞬間的白屏出現，ios白屏時間會很短，安卓要相對長一些，大概1-3s時間。這是react-native的工做機制決定的。 react-native在啓動時會裝載js bundle到內存並渲染界面，這段時間界面是一個空View.
上面的過程咱們稱之爲項目的初始化，那麼在這段項目初始化的過程當中咱們爲了有更好的用戶體驗須要渲染一個對用戶友好的界面來代替白屏，畢竟白屏對用戶不太友好，你能夠理解爲跟h5中的loading是一個意思。然而配置原生的啓動圖不像咱們加個loading那麼簡單，react-native-splash-screen幫咱們封裝了大部分配置，咱們須要作部分的集成就可使用，如下是配置教程：
1、下載 react-native-splash-screen:
在項目根目錄運行終端執行如下命令

yarn  add react-native-splash-screen
    或者
  npm install react-native-splash-screen --save複製代碼

特別注意 目前npm5存在安裝新庫時會刪除其餘庫的問題，致使項目沒法正常運行。請儘可能使用yarn代替npm操做；

2、安裝：
運行終端執行如下命令進行自動安裝

react-native link react-native-splash-screen複製代碼

3、配置react-native部分，在你的首頁導入react-native-splash-screen，在componentDidMount中執行hide隱藏啓動屏（固然這不是必須的，按照你的須要在適當的時候隱藏它就行）：

4、配置啓動圖：

（一） ios部分：

一、打開ios目錄下的AppDelegate.m文件，導入啓動屏包。在return以前執行顯示啓動屏幕。

二、用Xcode打開ios工程，找到Image.xcassets並點擊選中，在空白處選擇 App Icons & Launch Images ➜ New ios Launch Image , 完成這步後會生成一個LaunchImage

三、選中Image.xcassets ➜ LaunchImage，就是上一步建立的LaunchImage，右側框中的部分是讓你選擇要支持的系統，橫豎屏之類的（這個按照需求選擇，若是你的項目不打算支持ios6能夠不選擇）。而後點擊中間部分選中一個分辨率的框，上傳相應分辨率的圖片做爲啓動屏幕（注意：這裏的分辨率必定要對，若是比例不對傳不上去）

如下是選擇框中不一樣屏幕的分辨率：

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複製代碼

四、選中LaunchScreen.xib,會有個彈出框，默認選擇肯定就行，而後把右邊的 Use Launch Screen 取消選中（由於ios能夠用來自定義圖片啓動屏幕或經過 LaunchScreen.xib花一個啓動屏幕，ios默認花了一個，由於咱們用的是圖片因此要取消它）。

五、如圖選中項目工程，右側會出現工程的基本配置，設置Launch Images Srouce配置爲LaunchImage（若是沒有LaunchImage會彈出一個框提示拷貝圖片，按照默認點肯定就行），而後設置Launch Screen File爲空（這個很重要）。

六、預覽效果（上傳後圖片被刪幀壓縮太狠，效果不佳，湊合看把）

（二） android部分：

一、打開MainActivity.java按照下圖1，2，3步驟添加啓動屏包以及方法：

二、在 android/app/src/mian/res目錄下建立layout文件夾，並在建立的layout文件夾中建立launch_screen.xml

launch_screen.xml文件內容以下

<?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>複製代碼

三、在 android/app/src/mian/res目錄下建立drawable-xhdpi文件夾，並添加名爲launch_screen.png的圖片（其實你要想適配的更全面能夠像mipmap同樣添加不一樣分辨率的圖片）

四、預覽效果

可是感受仍是優勢瑕疵，仍是有一瞬間的白屏，這時候須要在android/app/src/main/res/values/styles.xml中添加 true 設置透明背景

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <!--設置透明背景-->
  <item name="android:windowIsTranslucent">true</item>
</style>

</resources>複製代碼

接下來看下設置透明背景後的效果

完美收官！

項目demo地址：github.com/duheng/Mozi

THE END！