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>

 

同样的带 + 号的行是增加的行  

posted @ 2019-03-13 13:53  乔伟2024  阅读(2024)  评论(0编辑  收藏  举报