解决启动白屏react-native-splash-screen使用记录

我们在进行react native开发时会发现，在打开应用的时候总是会有一段白屏时间的出现，这对于用户来说是不能忍的，所以我在网上寻找一番后，发现有一款插件已经解决了这个问题。

这就是react-native-splash-screen插件，这款插件可以很好的解决了react native启动时的白屏问题。下面就记录一下使用的过程希望对想要使用这款插件的人有所帮助。（Android为例）

首先下载插件

npm i react-native-splash-screen –save

然后自动安装插件

react-native link react-native-splash-screen

当然如果不太确定之前的链接是否已经帮我们安装好了插件的话我们可以手动的看一下
1.打开你的 android/settings.gradle 文件看是否有一下代码

 include ':react-native-splash-screen'   
 project(':react-native-splash-screen').projectDir = newFile(rootProject.projectDir,'../node_modules/react-native-splash-screen/android')

2.在你的 android/app/build.gradle 文件中是否添加了

dependencies {
        ...
        compile project(':react-native-splash-screen')  //<-----有没有这一段代码
        }

3.打开android\app\src\main\java\com[your project’s name]\MainApplication.java文件

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //有没有添加这一句
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

如果以上的代码都加上了就说明安装成功了。

然后我们开始配置文件
1.打开android\app\src\main\java\com[your project’s name]\MainActivity.java文件

import android.os.Bundle; //<--添加这一句
import org.devio.rn.splashscreen.SplashScreen; //<--添加这一句
public class MainActivity extends ReactActivity {
    //如果没有这个方法的话可以把整一个方法都复制进去
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // <--添加这一句
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

2.在android\app\src\main\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.我们还有准备一个加载时显示的图片命名为launch_screen.png（图片名一定要是这个名字不要改）然后放在android\app\src\main\res\drawable-xhdpi这个文件夹中。

配置好后我们就可以开始使用了
首先我们要在项目的首页（启动页）导入插件

import SplashScreen from ‘react-native-splash-screen’

然后在适当的时候结束启动屏幕（如：启动初始化完成后）:

import SplashScreen from 'react-native-splash-screen'

    export default class WelcomePage extends Component {
        componentDidMount() {
             // do anything while splash screen keeps, use await to wait for an async task.
            SplashScreen.hide();//关闭启动屏幕
        }
    }

好了现在我们开始测试一下,运行react-native run-android

一开始就翻车了，我们遇到了第一个错误

这个错误应该说我们项目的AndroidManifest.xml文件里面有一个属性android:allowBackup="false"的值为false，但同时我们安装的插件里的AndroidManifest.xml文件里也有一个这个属性android:allowBackup="true"但它的值是true所以产生了冲突。
错误提示我们可以在项目的AndroidManifest.xml文件中添加tools:replace="android:allowBackup"这个属性来对android:allowBackup的值进行覆盖。

好的，那我们打开\android\app\src\main\AndroidManifest.xml文件中添加tools:replace="android:allowBackup"属性。

  <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      tools:replace="android:allowBackup" //<---添加这个
      android:theme="@style/AppTheme">
      <activity

添加完这个属性后不要忘了还要绑定一下，添加在AndroidManifest.xml文件中

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"  // <--添加这一句

我们再run-android一下
这时我们发现打包好的应用崩溃了，打都打不开，这是这么回事呢？
我们在GitHub上找到了答案

原文

谷歌翻译后

总的来说我首先要把android\app\src\main\java\com\rntest2\MainActivity.java中的SplashScreen.show(this);
改为
SplashScreen.show(this, true);

 @Override
    protected void onCreate(Bundle savedInstanceState) {
       // SplashScreen.show(this); 
        SplashScreen.show(this,true);  // 改为这一句
        super.onCreate(savedInstanceState);
    }

添加完后还是没好，应用依旧在崩溃
这时我们打开node_modules> react-native-splash-screen> android> src>> SplashScreen.java 这个文件把

mSplashDialog = new Dialog(activity, fullScreen ? R.style.SplashScreen_Fullscreen : R.style.SplashScreen_SplashTheme);

改为
mSplashDialog = new Dialog(activity, R.layout.launch_screen);

好了我们再来一遍，
成功

PS:可能在run-android的时候会出现以下错误

解决方法：
cd android
gradlew clean
cd ../
react-native run-android

虽然是成功了不过还是有些不完美，还是有一点白屏的存在，这时我们打开 android/app/src/main/res/values/styles.xml文件,添加 <item name="android:windowIsTranslucent">true</item>,如下 :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item> //<--添加这个
    </style>
</resources>

然后在react-native run-android
完美

更多的信息可以去react-native-splash-screen官方的GitHub查询