react-native--06启动页

正常情况下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中的一个生命周期组件，专门处理当所有的组件都已经加载完毕之后，做一些事情。

效果图