微信号:codedev123

介绍:每天推送分享移动开发技术(Android/iOS);React Native技术文章;项目管理;程序猿日常点滴以及精品技术资讯文章.

基于最新版本React Native实现JsBundle预加载,界面秒开优化

2017-05-14 11:29 Songlcy


React Native jsbundle实现预加载,让界面秒开。

投稿:Songlcy

地址:http://blog.csdn.net/u013718120

1.问题分析

本篇博客和大家分享关于React Native的内容。想必大家在撸码中都发现了一个问题:从Android原生界面第一次跳转到React Native界面时,会有短暂的白屏过程,然后才会加载出界面。下次再跳转就不会出现类似问题。并且当我们杀死应用,重新启动App从Android Activity跳转到RN界面,依然会出现短暂白屏。

为什么第一次加载React Native界面会出现短暂白屏呢?大家别忘了,React Native的渲染机制是对于JsBundle的加载。项目中所有的js文件最终会被打包成一个JsBundle文件,Android环境下Bundle文件为:‘index.android.bundle’。系统在第一次渲染界面时,会首先加载JsBundle文件。那么问题肯定出现在加载JsBundle这个过程,即出现白屏可能是因为JsBundle正在加载。发现了原因,我们继续查看源码,看看是否能从源码中得知一二。

2.源码分析

Android集成的RN界面,需要继承ReactActivity,那么直接从ReactActivity源码入手:

不难发现,ReactActivity中的行为都交给了ReactActivityDelegate类来处理。很明显是委托模式。至于白屏原因是因为第一次创建时,那么我们直接看onCreate即可。找到ReactActivityDelegate的onCreate方法:

从源码可以看到,最终调用了loadApp方法,继续跟踪loadApp方法:


loadApp方法中调用了createRootView创建了ReactRootView,即React Native界面,并且将界面设置到Activity中。那么问题很可能出现在这了。插个断点,调试看看执行时间。


一切恍然大悟,在createRootView和startReactApplication时,消耗了较长时间。


既然是createRootView和startReactApplication执行了耗时操作的问题,那么我们只需要将其提前执行,创建出ReactRootView并缓存下来。当跳转到React Native界面时,直接设置到ContentView即可。有了解决思路,又该到我们甩起袖子撸码了。


3.功能实现

上述代码很简单,包含了三个方法:

(1)preLoad

负责创建ReactRootView,并添加到缓存。

(2)getReactRootView

获取创建的RootView

(3)deatchView

将添加的RootView从布局根容器中移除,在 ReactActivity 销毁后,我们需要把 view 从 parent 上卸载下来,避免出现重复添加View的异常。


从源码分析部分我们知道,集成React Native界面时,只需要继承ReactActivity,并实现getMainComponentName方法即可。加载创建视图的流程系统都在ReactActivity帮我们完成。现在因为自定义了ReactRootView的加载方式,要使用预加载方式,就不能直接继承ReactActivity。所以接下来需要我们自定义ReactActivity。


从源码中我们已经发现,ReactActivity的处理都交给了ReactActivityDelegate。所以我们可以自定义一个新的ReactActivityDelegate,只需要修改onCreate创建部分,其他照搬源码即可。

代码很长,重点在onCreate方法:

(1)首先从缓存中取ReactRootView

(2)缓存中不存在ReactRootView,直接创建。此时和系统帮我们创建ReactRootView没有区别

(3)将ReactRootView设置到Activity布局

很明显,我们让加载流程先经过缓存,如果缓存中已经存在了RootView,那么就可以直接设置到Activity布局,如果缓存中不存在,再去执行创建过程。

ReactNativePreLoader.preLoad(this,"HotRN");

我们在启动React Native前一个界面,执行preLoad方法优先加载出ReactRootView,此时就完成了视图预加载,让React Native界面达到秒显的效果。


4.效果对比

1.优化前2.优化后

本公众号欢迎大家投稿,如果你希望你的文章可以被更多人看到,直接将md、doc等格式的文章到我邮箱即可(781931404@qq.com),也可以加我QQ/微信(781931404)好友,需要注明(投稿),谢谢。

不来一起嗨么?


 
江清清 更多文章 荐|React Native开源项目-仿美团客户端(Android、iOS双适配) React Native与Android原生通信交互详解-"外语"需要好好学 荐|React Native开发开源稀土掘金客户端(Android,iOS双适配)-学习之用 发车|React Native之新列表组件FlatList使用详解 新|问答整理板块和公众号后期更新计划安排
猜您喜欢 直击Atlanta首次OpenStack PTG :Oslo playground 页面排序和共享 【视频】李松峰:技术书翻译那些事儿 图片,还可以这样玩儿 Android 极简反射教程