th:auto!important; min-height:auto!important; background:none!important'>*
获取 Application中 ReactNativeHost
@return
*
*/
ReactNativeHost getReactNativeHost() {
private
return
MainApplication.getInstance().getReactNativeHost();
}
/**
获取 ReactInstanceManager
*
@return
*
*/
ReactInstanceManager getReactInstanceManager() {
private
return
getReactNativeHost().getReactInstanceManager();
}
}
代码很长,重点在onCreate方法:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
(mMainComponentName != && !needsOverlayPermission) { 1.从缓存中获取RootView = ReactNativePreLoader.getReactRootView(mMainComponentName);
== {
2.缓存中不存在RootView,直接创建 = ReactRootView(mActivity);
3.将RootView设置到Activity布局
|
(1)首先从缓存中取ReactRootView
(2)缓存中不存在ReactRootView,直接创建。此时和系统帮我们创建ReactRootView没有区别
(3)将ReactRootView设置到Activity布局
很明显,我们让加载流程先经过缓存,如果缓存中已经存在了RootView,那么就可以直接设置到Activity布局,如果缓存中不存在,再去执行创建过程。
?
1 |
|
我们在启动React Native前一个界面,执行preLoad方法优先加载出ReactRootView,此时就完成了视图预加载,让React Native界面达到秒显的效果。
四、效果对比
优化前: 优化后:
Ok,到此想必大家都想撸起袖子体验一下了,那就开始吧~~ 源码已分享到Github,别忘了给颗star哦~
项目源码:https://github.com/songxiaoliang/ReactNativeApp
ZhouSa.com-周飒博客
还没有评论,来说两句吧...