美文网首页
React Native 分析(六)如何整合进现有 app

React Native 分析(六)如何整合进现有 app

作者: 吟游雪人 | 来源:发表于2017-08-01 18:00 被阅读0次

    RN 的机制就是所有代码,包括底层代码和业务代码,默认都打成一个 bundle 包
    这个 bundle 包就会面临着加载速度的问题。
    下载速度也是问题,没压缩500多 k,压缩100多,还是不包含业务代码的情况下。
    命令行打包工具支持 unbundle,但是 iOS 还是一个大 bundle,因为 iOS 加载多个小文件速率有问题。
    优化有两个方向
    一、拆分 js 模块,拆分出通用底层模块和业务模块,底层模块预先加载。
    问题:
    如果每个业务创建一个 js 引擎,那么就会创建多个 js 引擎,那么就会面临着内存占用多的问题。

    二、复用 js 引擎
    js 执行引擎只是一种通信机制,因此其实一个就够了,可以想办法复用起来。
    第一步就是把 init rootview 和 init bridge 拆分,也就是把引擎和界面拆分。
    输入了JSBundle以后,整个JS环境就已经完全配置完毕,ready就位了,但是并不会真正开始绘制界面。

    我们的 app,现有状况决定了不可能以单一RCTRootView去实现整个APP功能,注定了大部分保留现有native和 h5混搭功能,个别动态性较强的新功能又追求性能的情况下可以采用ReactNative去开发
    所以打算采用的是多RCTRootView得方式,创建一个RNViewController类,这个类内部有一个RCTRootView当做界面,但是整个RNViewController被当做其他natve的UIViewControler一样,去push,去present,去pop
    可以让所有的RCTRootView共享同一个RCTBridge,整个RCTBridge的初始化流程还是相当的复杂,挺耗性能的,既然是一个JS环境,干脆所有的RootView用同一个RCTBridge
    在app启动的时候,就创建初始化整个JS环境RCTBridge,等到用户要点击弹出RN页面的时候,再去构建RCTRootView,使用initWithBridge的方式。

    创建RCTRootView的时候如果bridge已经搭建完毕,JS环境已经就位,那么就会直接出发bundleFinishedLoading,如果JS环境没有就位,那么就会等待JS环境运行完毕Ready后,通过通知触发bundleFinishedLoading。

    - (void)bundleFinishedLoading:(RCTBridge *)bridge
    {
    ...
      [_contentView removeFromSuperview];
      _contentView = [[RCTRootContentView alloc] initWithFrame:self.bounds
                                                        bridge:bridge
                                                      reactTag:self.reactTag
                                                sizeFlexiblity:_sizeFlexibility];
      [self runApplication:bridge];
    
      _contentView.backgroundColor = self.backgroundColor;
      _contentView.passThroughTouches = _passThroughTouches;
      [self insertSubview:_contentView atIndex:0];
    ...
    }
    

    本质上 Bridge只是通信机制,那么如何标明这个请求来自哪个 rootview 呢?通信机制只包含了调用方法的必要信息,缺乏上下文信息。
    一般来说,一个 rootview 代表了一个模块,缺乏上下文信息也能正常使用。但一些情况下,就是识别这个请求发自哪个 rootview 了。
    可以在JS调用前,可以通过findNodeHandle(this)._hostContainerInfo._tag 找到component所在的rootViewTag,把这个tag随着API的参数一起发过来,然后直接通过RCTBridge.uimanager的方法获取RCTUIManager,从而查找整个_viewRegistry[tag]表,识别JSCall来自哪个RootView。

    关于集成效果,可以去应用市场搜索我们开发的应用“乐车邦”来体验RN 的感觉。

    好了,这系列文章算是告一个段落了,各位看官过瘾了没?

    相关文章

      网友评论

          本文标题:React Native 分析(六)如何整合进现有 app

          本文链接:https://www.haomeiwen.com/subject/xguflxtx.html