React-Native App啓動頁製作(安卓端)

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

app啓動頁第一是爲了宣傳，第二是爲了防止在app初始化期間屏幕白屏。所以app啓動頁不能干擾mainActivity的加載。app啓動頁一般方法就是在mainActivity上創建一個全屏的dialog，頁面加載完成後關閉該dialog。下面介紹在react-native中加入app啓動頁的方法。
首先創建一個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端。

創建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());
  }
}

創建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;
  }
}

最後在MainApplication.java中註冊package：

 

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

在js端關閉啓動頁：

 

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

原文鏈接：http://bougieblog.cn/article/55