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

背景

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

效果

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

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

原因

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

解决方案

创建一个RN加载器的单利

@H_502_26@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或者第一个界面调用

@H_502_26@MyReactInstanceManager.getInstance().init(this);

1. 在Activity中调用

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

万事大吉