问题描述
我们公司的APP部分模块使用了react native进行开发,使用react native开发确实很爽,一次编写到处运行,前端的开发体验,高效的开发效率,但是我们进入react native模块的时候,会有明显的白屏,时间大概是1-2s,这是很差的用户体验,我们今天的这篇文章就是为了解决这个痛点。
已有方案
我相信很多同学可能都看过react native中文网推荐的ReactNative安卓首屏白屏优化这篇文章,这篇文章方案很给力!作者采用了内存换时间的方案,缓存了ReactInstanceManager和ReactRootView对象,我们只需要在应用启动的时候初始化,之后进入react native模块都是调用缓存里的数据,所以速度非常快。
此方案存在的小问题
但是试过的同学可能知道这个方案有个小问题:第一次进入react native模块之后,再次进入react native模块,react native 页面的生命周期都不会执行(render, componentDidMount等),因为我们拿的都是已经缓存好的数据,假如我们在react native页面请求数据更新页面,只有第一次进入的时候是有效的。
改进方案
因为发现了这个问题,所以在github上面向作者提了issue,作者给了耐心解答,所以把改进方案分享给大家,省的大家走弯路。这篇文章还是原作者cnsnake11的智力成果,我只是做个分享以及简化了一点点代码。
我们这篇文章的重点是Android白屏优化,关于Android原生项目集成react native,请看我另一篇文章Android原生集成react native。
我们现在的方案就是只缓存ReactInstanceManager,每次进入ReactActivity的时候新建一个ReactRootView对象。具体代码如下:
public class RNCacheViewManager { private static ReactInstanceManager mManager = null; //init public static void init(Context context) { mManager = createReactInstanceManager(); ReactRootView mRootView = new ReactRootView(context); mRootView.startReactApplication(mManager,"test",null); } public static ReactInstanceManager getReactInstanceManager() { return mManager; } private static ReactInstanceManager createReactInstanceManager() { return ReactInstanceManager.builder() .setApplication(SHApplication.getInstance()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(true) //开发者支持,开发的时候要设置为true,不然无法使用开发者菜单 .setInitialLifecycleState(LifecycleState.RESUMED) .build(); } }
我们这个类主要负责初始化ReactInstanceManager对象,我们可以在APP启动的时候进行初始化(调用init函数),然后我们在自己的ReactActivity中进行调用。
public class ReactRootActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = RNCacheViewManager.getReactInstanceManager(); Bundle bundle = getIntent().getExtras(); mReactRootView.startReactApplication(mReactInstanceManager,bundle); setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } @Override protected void onPause() { super.onPause(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostPause(this); } } @Override protected void onResume() { super.onResume(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostResume(this,this); } } @Override protected void onDestroy() { super.onDestroy(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostDestroy(this); } } @Override public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } @Override public boolean onKeyUp(int keyCode,KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode,event); } }
总结
这个问题耽误了我很长的时间,所以我想把我的心路历程分享给大家,这样大家遇到这个问题的时候就可以分分钟搞定,如果我有说的什么不清楚的地方,尽管提问。