醉临武-临武县第一中学官网

React Native使用react-native-splash-screen避免启动白屏,及配

现在我们做一个APP,不可避免的要添加一个启动页,使APP对用户更加友好。那么如何利用react-native-splash-screen来为APP实现启动页呢。本文在RN最新版本0.48.4上

亲测可用。小伙伴们放一百个心,下面就来一探究竟吧

PS:这里需要注意一下,本文探讨的安卓如何配置实现,如果你是IOS的话,那么步骤是不一样的。具体请看官网或者这个教程:http://www.jianshu.com/p/4540ac17dfd4

安装步骤:

npm i react-native-splash-screen --save

react-native link react-native-splash-screen


自动配置的话,有些时候会漏掉一些东西,所以自己再手动检查一遍是最保险的


在android/settings.gradle下:


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


QQ图片20170928150442.png


然后在:android/app/build.gradle


dependencies {
    ...
    compile project(':react-native-splash-screen')
}

QQ截图20170928150823.png

修改MainApplication.java

import com.facebook.react.ReactApplication;

import org.devio.rn.splashscreen.SplashScreenReactPackage;

import com.oblador.vectoricons.VectorIconsPackage;

import com.remobile.toast.RCTToastPackage;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;


import java.util.Arrays;

import java.util.List;


public class MainApplication extends Application implements ReactApplication {


private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}


@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new SplashScreenReactPackage(),

new VectorIconsPackage(),

new RCTToastPackage()

);

}

};

QQ截图20170928151028.png

修改MainActivity.java

package com.demo48;


import com.facebook.react.ReactActivity;

import org.devio.rn.splashscreen.SplashScreen; // here


public class MainActivity extends ReactActivity {


   /**

    * Returns the name of the main component registered from JavaScript.

    * This is used to schedule rendering of the component.

    */

@Override

protected String getMainComponentName() {

SplashScreen.show(this);

return "Demo48";

}

}

QQ截图20170928151214.png


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>

app/src/main/res目录下,建立存放启动图的文件夹

  • drawable-ldpi

  • drawable-mdpi

  • drawable-hdpi

  • drawable-xhdpi

  • drawable-xxhdpi

  • drawable-xxxhdpi

随便建两个就好了,里面的图片最好放最大最清晰的,他会自动伸缩,我的规格是:750*1334


然后还需要在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">

<!--设置透明背景-->

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

</style>


</resources>

最后:如何调用呢?

在入口页加上以下代码:

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

componentDidMount() {

SplashScreen.hide(); // 隐藏启动屏

}

就ok了,


所有配置做完之后,运行一遍,如果有图片相关的报错,可以加上这两句代码试一试:

aaptOptions.cruncherEnabled = false  

aaptOptions.useNewCruncher = false

QQ截图20170928153644.png