[React Native] Android 白屏优化

APP是原生嵌入一个React Native界面

背景

按官方实例集成了一个React Native界面，但每次打开都感觉等待时间有点长，会有白屏状态。这对于强迫症来说简直不能忍。于是决定优化。

效果

优化前的效果，白屏时间较长。

优化后，白屏时间明显变短。

原因

当Android要运行React Native时，需要先加载JSBundle，这块是比较耗时的。
之前的做法是在打开界面的时候才去加载，所以会慢一拍。
优化之后，在App启动时，就初始化JSBundle，然后在RN界面直接使用。

解决方案

创建一个RN加载器的单利

import android.app.Activity;
import android.app.Application;
import android.content.Context;
import android.os.Bundle;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactInstanceManagerBuilder;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.prance.lib.react.pack.MyReactPackage;

/**
 * JSBundle加载唯一实例
 * <p>
 * Created by bingbing on 2017/5/9.
 */

public class MyReactInstanceManager {

    private static MyReactInstanceManager mInstance;

    private ReactInstanceManager mReactInstanceManager;

    public static MyReactInstanceManager getInstance() {
        if (mInstance == null) {
            synchronized (MyReactInstanceManager.class) {
                if (mInstance == null) {
                    mInstance = new MyReactInstanceManager();
                }
            }
        }
        return mInstance;
    }

    /**
     * 初始化
     *
     * @param context
     */
    public void init(Context context) {
        getReactInstanceManager(context);
    }

    /**
     * 初始化 ReactInstanceManager
     * 预加载jsBundle
     * @param context
     * @return
     */
    public ReactInstanceManager getReactInstanceManager(Context context) {

        Application application = (Application) context.getApplicationContext();

        if (mReactInstanceManager == null) {
            ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
                    .setApplication(application)
                    .setBundleAssetName("index.android.bundle")
                    .setJSMainModuleName("index.android")
                    .setUseDeveloperSupport(false)
                    .addPackage(new MyReactPackage());

            //这里注意！！一定要是LifecycleState.BEFORE_CREATE
            //这样当正式加载的时候，才可以获取到mCurrentActivity的引用
            builder.setInitialLifecycleState(LifecycleState.BEFORE_CREATE);

            mReactInstanceManager = builder.build();

            //预加载！！！
            mReactInstanceManager.createReactContextInBackground();
        }

        return mReactInstanceManager;
    }

    /**
     * 开启开发者菜单
     */
    public void showDevOptionsDialog() {
        mReactInstanceManager.showDevOptionsDialog();
    }

    /**
     * 返回键
     */
    public void onBackPressed() {
        mReactInstanceManager.onBackPressed();
    }

    /**
     * 在Activity的onResume中调用
     * @param activity
     * @param handler
     */
    public void onHostResume(Activity activity, DefaultHardwareBackBtnHandler handler) {
        mReactInstanceManager.onHostResume(activity, handler);
    }

    /**
     * 在Activity的onPause中调用
     * 
     * @param activity
     */
    public void onHostPause(Activity activity) {
        mReactInstanceManager.onHostPause(activity);
    }

    /**
     * 创建ReactRootView实例，并启动React Native
     * @param context
     * @param initialProps
     * @return
     */
    public ReactRootView getRootView(Context context, Bundle initialProps) {

        ReactRootView view = new ReactRootView(context);
        view.startReactApplication(mReactInstanceManager, "App", initialProps);
        return view;
    }

    /**
     * 销毁RootView，在Activity的onDestroy中调用
     * @param view
     */
    public void destroy(ReactRootView view) {
        mReactInstanceManager.detachRootView(view);
    }

    /**
     * 销毁Manager，在程序退出或者最后一个RN界面结束时调用
     */
    public void destroy() {
        mReactInstanceManager.onHostDestroy();
    }

}

初始化

1. 在Application或者第一个界面调用

MyReactInstanceManager.getInstance().init(this);

1. 在Activity中调用

ReactRootView rootView = MyReactInstanceManager.getInstance().getRootView(mActivity, initialProps);
setContentView(rootView);

万事大吉