正常情況下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中的一個生命周期組件，專門處理當所有的組件都已經加載完畢之后，做一些事情。
效果圖
效果圖
