使用 React Native 开发混合应用的过程中,我们在打完 bundle 进 release 包后,会发现第一次进入页面(React 的 Activity)会有一个短暂的白屏过程(在真机上近 1秒,在模拟器上比较快,在 200毫秒 左右),而且在完全退出后再进入,仍然会有这个白屏。
仔细查看加载过程(其实猜猜都能知道)后可以发现,这个过程就是在加载我们的 js bundle,通常即便是一个小的 RN 应用(混合应用中的子业务),也会动辄到 1MB 的大小,除非是完整的 RN 应用,可以把这个当做是启动速度,否则这样的加载速度都是对用户体验的很大伤害。
于是我们决定进行 Bundle 预加载的优化。
项目源码上传在:markzhai/react-native-preloader,稍后会上传到 maven,版本号会和 rn 保持一致。
耗时操作
见 ReactActivity
的 onCreate
方法:
1 |
|
打点后可以发现耗时的其实是
- createRootView();
- startReactApplication();
这两个操作,所以考虑只需要提前创建 ReactRootView
进行 render,之后直接挂载该 view 上去即可。
预加载
创建预加载类 ReactPreLoader
:
1 | /** |
在 init 操作中,我们通过 ReactInfo 缓存把 view 缓存在本地的 ArrayMap
。
值得注意的是 onDestroy
,在 ReactActivity 销毁后,我们需要把 view 从 parent 上卸载下来。
使用预加载的 view
使用预加载的 View,就需要侵入 activity 的创建过程,我们无法再使用 RN 库提供的 ReactActivity
,只能建立自己的,以下列出修改的方法,其他方法照抄 ReactActivity
:
1 | /** |
使用
在进入该 RN activity 的上一个 activity 调用:1
ReactPreLoader.init(this, ReactCardActivity.reactInfo);
ReactCardActivity 继承我们自己的 ReactActivity:1
2
3
4
5
6
7
8
9
10
11
12
13
14public class ReactCardActivity extends MrReactActivity {
public static final ReactInfo reactInfo = new ReactInfo("card", null);
protected String getMainComponentName() {
return reactInfo.getMainComponentName();
}
public ReactInfo getReactInfo() {
return reactInfo;
}
}
优化后可以达到瞬间加载。
已知的坑
由于进行了预加载,目前已知的问题是 Modal
无法显示 —— 因为 Modal
在 Android 的实现使用了 Dialog
,而该 View 将创建 ReactRootView
的 context 作为参数传给了 Dialog
,而不是实际运行时所在的 Activity
context。查看源码可以验证(com.facebook.react.views.modal)。
TimePickerAndroid
这类 picker 则没有问题。见 issue 9496
作为规避方案,目前使用 MutableContextWrapper
进行 context 替换。见 GitHub 上的具体实现(感谢评论里的 Lovecraft 提供的方案)。