react-native-splash-screen整合實踐（ios & android）

墨子攻城發表於2017-09-23
ReactiOSAndroid

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

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

特別注意 目前npm5存在安裝新庫時會刪除其他庫的問題，導致專案無法正常執行。請儘量使用yarn代替npm操作；

二、安裝：
執行終端執行以下命令進行自動安裝

react-native link react-native-splash-screen複製程式碼

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

四、配置啟動圖：

（一） ios部分：

1、開啟ios目錄下的AppDelegate.m檔案，匯入啟動屏包。在return之前執行顯示啟動螢幕。

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


3、選中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複製程式碼


4、選中LaunchScreen.xib,會有個彈出框，預設選擇確定就行，然後把右邊的 Use Launch Screen 取消選中（因為ios可以用來自定義圖片啟動螢幕或通過 LaunchScreen.xib花一個啟動螢幕，ios預設花了一個，因為我們用的是圖片所以要取消它）。


5、如圖選中專案工程，右側會出現工程的基本配置，設定Launch Images Srouce配置為LaunchImage（如果沒有LaunchImage會彈出一個框提示拷貝圖片，按照預設點確定就行），然後設定Launch Screen File為空（這個很重要）。

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


（二） android部分：

1、開啟MainActivity.java按照下圖1，2，3步驟新增啟動屏包以及方法：


2、在 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>複製程式碼

3、在 android/app/src/mian/res目錄下建立drawable-xhdpi資料夾，並新增名為launch_screen.png的圖片（其實你要想適配的更全面可以像mipmap一樣新增不同解析度的圖片）


4、預覽效果


但是感覺還是優點瑕疵，還是有一瞬間的白屏，這時候需要在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！

相關文章