Taro3.2 适配 React Native 之运行时架构详解

导读

由 58 前端团队主导的 Taro 3 适配 React Native 工作已完成有一段时间了。目前发布了多个体验版，也将在3月底迎来正式版。基于 Taro 的良好架构演变，适配 React Native 的方案的也做了较大调整，本文将主要介绍 Taro 3 适配 React Native 运行时相关的详细设计与实现。

背景

Taro 已经进入3.0 时代，相对于 Taro 1/2 来说，采用重运行时架构，可以让开发者能够获得完整的 React/Vue 等框架开发体验，因此，我们在设计 Taro3 React native 的方案时，也是基于运行时方案，增加 taro-runtime-rn 包来适配 React Native 端，使得 Taro 标准的 React 代码可运行在 React Native 端，让开发者可以低成本的扩展到 React Native 端。

方案设计

Taro 3.0 是近乎全运行时方案，在设计整个架构时，从浏览器的角度去思考，无论是开发框架是什么， React 也好, Vue 也罢，最终代码经过运行之后，都是调用浏览器的 BOM/DOM 的 API，因此，对于小程序端，Taro 团队增加 taro-runtime 包，在这个包中实现一套高效、精简版的 DOM/BOM API， 当运行在小程序端时，也有一套高效的 DOM/BOM API，从而实现了跨框架开发方案。
详细内容参考( https://mp.weixin.qq.com/s/5pdUD9YNojgvZBSve5-2EA ）
在设计 Taro3 React Native 方案之初，我们希望可以与小程序端标准较为一致的方案，对比了两种方案：
支持 React, Vue 开发，与小程序的设计思路一致，让 React Native 去模拟浏览器的 BOM/DOM API ，实现 React Native 的 render
支持 React 开发，通过编译和运行时去适配 Taro 的写法
以上两种方案，如果采用基于小程序的方案，会存在以下问题：
基于小程序的方案，运行在 React Native 端，性能会有所下降，且方案更加复杂化，维护成本太高
脱离 React Native 生态，比如一些原本可直接使用的组件，需要做一层适配才可使用
因此，我们采用第二种方案，更好的贴近 React Native 生态，通过编译和运行时适配，让 Taro3 的 React 代码可以方便的扩展到 React Native 端。

详细设计

Taro3 React Native 整体方案的设计思路：基于 Taro 源码，利用 Metro 打包直接生成 jsBundle，通过编译和运行时适配到 Taro 的写法。

（https://mp.weixin.qq.com/s/-7G7NMHX8ol99QxkswFOxg）
直接基于源码去打包运行时适配，如何做适配，需要适配哪些内容？
入口文件及配置，Taro 入口写法是基于小程序的方案，需将其转换为 React Native 的入口及路由导航系统
页面的配置，对下拉属性，滚动，页面 Title 等相关设置
生命周期， componentDidShow, componentDidHide 的支持
页面函数，onPullDownRefresh, onPageScroll 等
事件、Taro 自定义 Hooks、 Current 对象
样式的支持，这里不过多的赘述，后续会有详细的文章说明
方案实现
Taro3 React Native 是整体方案是利用 Metro 基于 Taro 源码打包。
Metro 是针对 React Native 的 JavaScript 模块打包工具，接收一个入口文件和打包配置，将项目中所有依赖打包在一个或多个js文件。
打包过程会分为三个阶段：
Resolution：构建模块的依赖图，处理模块的依赖关系
Transformation：负责将模块转换成目标平台可以理解的格式
Serialization：模块转换序列化，组合这些模块来生成一个或多个包
对于 Taro 写法的支持，我们在 Transformation 转化阶段，通过自定义的 taro-rn-transformer 与 taro-rn-style-transformer 对 Taro 的代码进行转换。

在编译阶段，页面源文件都会进入到自定义的 taro-rn-transformer ，在 rn-transformer 中，会根据编译配置，一是，入口及页面会
注入运行时处理函数, 二是，在 React Native 中，样式并没有全局概念，对于 Taro 中定义的全局样式，比如 app.scss 等，在进入到 rn- transformer，会全局样式引入到页面中，支持到全局样式。
在代码运行阶段，运行时处理函数会适配到Taro的相关内容，包含动态构建导航，页面配置，生命周期函数等相关内容，完成对入口，导航与页面的支持。
Taro 3 React Native中，运行时方案主要包含三个模块 ，各个模块之间的关系：

taro-router-rn，基 React Navigation 对路由进行封装，提供动态创建导航的方法给运行时，并且封装导航相应的API内容。

taro-runtime-rn，运行时的核心内容，主要提供两个包装方法，一是 createReactNativeApp，用来对页面入口的相关处理，二是 createPageConfig，页面的包装方法，完成对页面的适配，包含生命周期，页面的配置等。

taro-rn-transformer, 编译时注入页面的包装方法和入口方法，并将入口的全局样式注入到页面中。

对于 Taro 运行时的适配的内容，如图所示：

入口文件支持
在 React Native 中，AppRegistry 是所有 React Native 应用的 JS 入口，通过 AppRegistry.registerComponent 方法注册根组件，若有多个页面，在根组件中建立对应导航系统。
在 Taro 中，入口是按照小程序方案来定义，要运行在 React Native 端，需将这些配置转换为 React Native 相关的配置，生成可运行在 React Native 的入口文件。
Taro 中入口文件：

//app.config.ts
export default {
   
  pages:[
    'pages/index/index',
    'pages/index/about'
  ],
  window:{
   
      backgroundTextStyle: 'light',
      ...