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>
        <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:windowTranslucentStatus">true</item>
        + <item name="android:statusBarColor">@android:color/transparent</item>
        + <item name="android:windowFullscreen">true</item>
    </style>

    <style name="SplashScreen_Fullscreen" parent="SplashScreen_SplashTheme">
        <item name="android:windowFullscreen">true</item>
    </style>
</resources>

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

这样，再跑一次看看，似乎感觉一切都很完美了，但是...
当你使用诸如TouchableOpacity等有半透明的组件时，就会发现当这些组件是半透明的时候，底部的背景其实不是纯色，而是一开始设置的那张图片。那么如何解决这个问题呢。
android根目录 /app/src/main/java/com/wifi/MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);
    super.onCreate(savedInstanceState);
    // 移除掉全屏和背景图片 
    + removeFullScreenAndBgImage(this );
}

// 此方法为增加的方法
public static void removeFullScreenAndBgImage(Activity activity) {
    Window window = activity.getWindow();
    window.setBackgroundDrawableResource(
        R.drawable.redbox_top_border_background
    );
    window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
}

其中带 + 号的为增加的代码 。