react native 完美解決啓動白屏

先講下個人RN版本0.58.5

首先安裝react-native-splash-screen（目前使用的版本是3.2.0）

項目地址https://github.com/crazycodeboy/react-native-splash-screen

原理參考做者的文章:https://www.jianshu.com/p/78571e5435ec

安裝了這個組件後，能夠解決掉RN的啓動白屏，可是啓動時仍然會有一小段的白屏，

這個是ANDROID自己的白屏，要解決掉這個白屏

須要修改android目錄下app/src/main/res/values/styles.xml

 

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="android:windowTranslucentStatus">true</item>

        + <item name="android:statusBarColor">@android:color/transparent</item

        + <item name="android:windowBackground">@drawable/launch_screen</item>

        + <item name="android:windowFullscreen">true</item>

</style>

 

 

其中有 + 號的行爲後增長的行，其主要原理就是ANDROID啓動時先設置一個背景，這裏面咱們把背景設成和react-native-splash-screen組件同樣的背景，

<item name="android:windowBackground">@drawable/launch_screen</item>

這樣設置完成後，啓動時確實沒有白屏了，可是有一個問題，咱們在啓動時的背景是全屏，沒有標題欄，可是當react-native-splash-screen的背景啓動時，就會出現標題欄，這時候圖片就會有一個向下的位移，要解決這個問題，須要改下react-native-splash-screen的源碼。

找到node_modules/react-native-splash-screen/android/src/main/res/values/styles.xml

 

   

<resources>
    <style name="SplashScreen_SplashAnimation">
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    </style>

    <style name="SplashScreen_SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowAnimationStyle">@style/SplashScreen_SplashAnimation</item>
        + <item name="android:windowNoTitle">true</item>
        + <item name="android:windowTranslucentStatus">true</item>
    </style>
    <style name="SplashScreen_Fullscreen" parent="SplashScreen_SplashTheme">
        <item name="android:windowFullscreen">true</item>
    </style>
</resources>

 

一樣的帶 + 號的行是增長的行