react-native-splash-screen的坑--android

react-native-splash-screen的坑–android
最近在学习react-native，但是在启动APP的时候发现会有瞬间的白屏出现，ios白屏时间会很短，安卓要相对长一些，大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面，这段时间界面是一个空View。
上面的过程我们称之为项目的初始化，那么在这段项目初始化的过程中我们为了有更好的用户体验需要渲染一个对用户友好的界面来代替白屏，毕竟白屏对用户不太友好，你可以理解为跟h5中的loading是一个意思。然而配置原生的启动图不像我们加个loading那么简单，react-native-splash-screen帮我们封装了大部分配置，我们需要做部分的集成就可以使用，以下是配置教程：

1.下载及安装 react-native-splash-screen:
npm install react-native-splash-screen –save
react-native link react-native-splash-screen

2.创建布局文件
在android/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/splash">
</LinearLayout>

3.添加启动页图片
在android/app/src/main/res目录中,新建drawable-xhdpi和drawable-xxhdpi目录,在其中放入启动页图片,命名为splash.png
4.修改Android源文件
4.1 android\settings.gradle

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

4.2 android\app\build.gradle

dependencies {
    compile project(':react-native-splash-screen') // 确认存在, 如果不存在则需要手动增加这行
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

4.3 android\app\src\main\java\com\rn_practice\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);
    }

4.4 android\app\src\main\java\com\rn_practice\MainApplication.java

package com.awesomeproject;

import android.app.Application;

import com.facebook.react.ReactApplication;
import org.devio.rn.splashscreen.SplashScreenReactPackage; // 添加这个
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() // 添加这个
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

4.5 android\app\src\main\res\values\styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item> // 添加这个
        <!-- Customize your theme here. -->
    </style>

</resources>

5.修改项目的js文件
这里就仁者见仁智者见智了, 具体修改哪个文件,要看你想放在哪了.我这里因为就一个js文件,index.android.js,所以是直接放在了这个文件中.在项目的根组件中,添加如下内容:

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.
        setTimeout(() => {
          SplashScreen.hide();
       }, 1000);  // 这里可以自定义来设置显示时间,让其暂停1秒后,再跳转到主页面
    }
}

然后重新安装打包并安装APP到手机上,就会看到启动页

react-native-splash-screen的坑--android

猜你喜欢