react native啟動頁製作，隱藏啟動白屏，打打廣告
這篇文章是根據開源專案react-native-splash-screen來寫的。在使用react-native-link命令安裝該包後不知是何原因導致app無法運行了。issue也有很多使用者說安裝該包後項目出錯。其實製作app啟動頁很簡單，大可不必引用該包。下面開始正文。

app啟動頁第一是為了宣傳，第二是為了防止在app初始化期間螢幕白屏。所以app啟動頁不能干擾mainActivity的載入。app啟動頁一般方法就是在mainActivity上建立一個全屏的dialog，頁面載入完成後關閉該dialog。下面介紹在react-native中加入app啟動頁的方法。

Native端

建立dialog全屏樣式

在styles.xml中新增：

<style name="Dialog_Fullscreen">
  <item name="android:windowFullscreen">true</item>
  <item name="android:windowNoTitle">true</item>
</style>

建立佈局檔案

建立一個dialog內部的佈局檔案，命名為activity_launch.xml：

<?xml version="1.0" encoding="utf-8"?>
 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/launch_screen">
</LinearLayout>

其中launch_screen為啟動頁圖片，必須為png格式，位於drawable目錄下。

建立類SplashScreen：

public class SplashScreen {
  private static Dialog mSplashDialog;
  // 顯示啟動頁
  public static void show(final Activity activity) {
    mSplashDialog = new Dialog(activity,R.style.Dialog_Fullscreen); // 設定dialog全屏
    mSplashDialog.setContentView(R.layout.activity_launch); // 設定dialog內容
    mSplashDialog.setCancelable(false);
    mSplashDialog.show();
  }
// 關閉啟動頁
  public static void hide(Activity activity) {
    mSplashDialog.dismiss();
    mSplashDialog = null;
  }
}

顯示啟動屏

在mainActivity建立時顯示啟動頁，在MainActivity.java中新增：

@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this);
  super.onCreate(savedInstanceState);
}

對於rn專案，當HomePage執行到componentDidMount生命週期的時候，首屏渲染完畢，關閉啟動頁，故需要把類SplashScreen中的hide方法傳遞到js端。

新增js方法

建立ModuleHideSplash類繼承ReactContextBaseJavaModule：

public class ModuleHideSplash extends ReactContextBaseJavaModule {
  private Context context;
  public ModuleHideSplash(ReactApplicationContext reactContext) {
    super(reactContext);
    context = reactContext;
  }
  @Override
  public String getName() {
    return "SplashScreen";
  }
  @ReactMethod
  public void show() {
    SplashScreen.show(getCurrentActivity());
  }
  @ReactMethod
  public void hide() {
    SplashScreen.hide(getCurrentActivity());
  }
}

新增module

建立myPackge並新增 ModuleHideSplash例項：

public class MyPackage implements ReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new ModuleHideSplash(reactContext));
    return modules;
  }
}

新增package

最後在MainApplication.java中註冊package：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new MyPackage()
  );
}

js端

在js端關閉啟動頁：

import {NativeModules} from "react-native";
componentDidMount() {
  NativeModules.SplashScreen.hide();
}