th:auto!important; min-height:auto!important; background:none!important'>*

获取 Application中 ReactNativeHost

     *

@return

     */ 

    private

ReactNativeHost getReactNativeHost() { 

        return

MainApplication.getInstance().getReactNativeHost(); 

    

 

    /**

     *

获取 ReactInstanceManager

     *

@return

     */ 

    private

ReactInstanceManager getReactInstanceManager() { 

        return

getReactNativeHost().getReactInstanceManager(); 

    

}

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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

if

(mMainComponentName != null

&& !needsOverlayPermission) { 

           //

1.从缓存中获取RootView 

           mReactRootView

= ReactNativePreLoader.getReactRootView(mMainComponentName); 

 

           if(mReactRootView

== null)

 

               //

2.缓存中不存在RootView,直接创建 

               mReactRootView

= new

ReactRootView(mActivity); 

               mReactRootView.startReactApplication( 

                       getReactInstanceManager(), 

                       mMainComponentName, 

                       null); 

           

           //

3.将RootView设置到Activity布局 

           mActivity.setContentView(mReactRootView);

(1)首先从缓存中取ReactRootView

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

(3)将ReactRootView设置到Activity布局

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

?

1

ReactNativePreLoader.preLoad(this,"HotRN");

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

四、效果对比

优化前:                                                                                                     优化后:

                             

Ok,到此想必大家都想撸起袖子体验一下了,那就开始吧~~ 源码已分享到Github,别忘了给颗star哦~

项目源码:https://github.com/songxiaoliang/ReactNativeApp

ZhouSa.com-周飒博客

相关阅读

发表评论

表情:
验证码
评论列表 (暂无评论,550人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码