ReactNative解决白屏问题

我们用RN创建一个应用以后刚启动有一两秒的白屏时间，然而解决办法只单纯的靠RN是解决不了的，需要借助原生的Android或IOS代码来解决，并且还需要第三方库。。。

解决办法如下：

 

1、下载react-native-splash-screen模块: npm i react-native-splash-screen --save

2、配置模块信息，我们推荐快捷配置,cmd下输入：react-native link react-native-splash-screen

3、打开目录app/src/main/res，然后创建以下几个文件夹:

drawable-ldpi

drawable-mdpi

drawable-hdpi

drawable-xhdpi

drawable-xxhdpi

drawable-xxxhdpi

然后把相应的图片放入其中，注意！！！首启动页面图片文件名必须是: launch_screen.jpg，或png图片。。。

4、在app/src/main/res文件夹下建一个layout文件夹，然后在该文件夹下建立这么一个文件：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>

5、在首启动页面引入该模块: import SplashScreen from 'react-native-splash-screen'

componentDidMount() {

    // 控制首启动页面的存留时间，比如打开QQ的时候那个大企鹅啥时候消失

        SplashScreen.hide(); //控制启动页面消失的代码

    }

 

 

详细使用方法看如下网站:

https://github.com/crazycodeboy/react-native-splash-screen