正常情况下react-native开发的应用，从点击打开APP的那一刻起，一直会显示白屏直到所有的内容加载完成，才会完整的呈现所有的内容，这个时间长短的过程取决与网络传输时间，但是一般情况即便是开发环境中也要等大概0.5至1秒钟左右的白屏等待时间，这是非常不良好的体验，启动页不仅仅是替代白屏的效果，对增加企业品牌特效，因此启动页显得尤为重要。
react-native官方旨在于提供基础组件，很多app的特效功能都需要结合java来实现或者结合开源插件来实现，因此学习这项技术积累的是特效实现和框架结构代码合理组织，往后都是以一个组件或者一个特效为目标进行记录。
react-native-splash-screen
react-native框架没有提供启动页实现，因此需要到网上去找一个开源的插件，我找到的是react-native-splash-screen，它是java扩展实现，下面是安装过程。
1. 进入项目目录
C:\Users\zhengtong>cd C:\Users\zhengtong\WebstormProjects\rn_practice
2. 下载插件
C:\Users\zhengtong\WebstormProjects\rn_practice>npm i react-native-splash-screen --save
3. 自动安装
C:\Users\zhengtong\WebstormProjects\rn_practice>react-native link react-native-splash-screen
4. 创建launch_screen.xml文件
# 创建目录
C:\Users\zhengtong\WebstormProjects\rn_practice>mkdir android/app/src/main/res/layout/
# 进入layout目录
C:\Users\zhengtong\WebstormProjects\rn_practice>cd android/app/src/main/res/layout/
# 编辑文件(dos命令行我不知道如何编辑, 所以我直接列出文件内容)
C:\Users\zhengtong\WebstormProjects\rn_practice\android\app\src\main\res\layout>vim 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. 检查：启动页图片
安装好react-native-splash-screen之后，默认情况下，会创建这两个目录drawable-xhdpi、drawable-xxhdpi，路劲为C:\Users\zhengtong\WebstormProjects\rn_practice\android\app\src\main\res，这两个目录分别存放着两张分辨率不一样大小的相同图片，用于在不同手机上显示，可以通过替换这两张图片来显示自己想要的启动页。
6. 检查：配置文件
android\settings.gradle
rootProject.name = 'rn_practice'
include ':app'
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
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
}
android\app\src\main\java\com\rn_practice\MainApplication.java
package com.rn_practice;
import android.app.Application;
import android.util.Log;
import com.facebook.react.ReactApplication;
import com.cboy.rn.splashscreen.SplashScreenReactPackage; // HERE
import com.facebook.react.ReactInstanceManager;
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
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SplashScreenReactPackage() // HERE
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
android\app\src\main\java\com\rn_practice\MainActivity.java
package com.rn_practice;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.cboy.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() {
return "rn_practice";
}
@Override // HERE
protected void onCreate(Bundle savedInstanceState) { // HERE
SplashScreen.show(this, true); // HERE
super.onCreate(savedInstanceState); // HERE
} // HERE
}
编写项目代码
index.android.js
import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import { AppRegistry, View, Text, StatusBar, Navigator, TouchableHighlight } from 'react-native';
const sleep = require('es6-sleep').promise;
export default class NavAllDay extends Component {
async sleep(milliansecond) {
await sleep(milliansecond);
}
async componentDidMount() {
// do anything while splash screen keeps, use await to wait for an async task.
await sleep(2000);
await SplashScreen.hide();
}
render() {
const routes = [ {title: 'First Scene', index: 0}, {title: 'Second Scene', index: 1}, ];
return (
<View style={{flex: 1}}>
<Text>Hello World</Text>
</View>
);
}
}
AppRegistry.registerComponent('rn_practice', () => NavAllDay);
componentDidMount()是react-native中的一个生命周期组件，专门处理当所有的组件都已经加载完毕之后，做一些事情。
效果图
效果图
