前端工程化- ReactNative整合Taro工程可行性实践方案

Posted 2021-12-05 Songlcy

背景

随着基因宝多业务场景化的需求，前端需要同时面临App、Web、小程序多端同步开发相同业务功能的问题。App整体架构为React Native，小程序及Web端使用Taro来实现。

当前模式下，需要分别对Web、小程序、App进行开发，并且为了“复用”代码，小程序端与App端需要分别等待做代码转换，工作及人员重叠，时间线延长，效率极低。

为了解决以上问题，提升开发效率，降低错误成本，提出在App端实现对Taro代码的编译，转换、运行，实现无缝衔接。

方案

Taro官方在3版本上针对RN做了补充和完善，较之前的版本，在RN的支持上更加完整。

Taro React Native 执行流程

1. @taro/cli 中通过 registerPlatform 插件方式注册 rn 平台

2. yarn dev:rn 获得编译配置，转为 babel.config.js 及 metro.config.js 配置

3. 所有 React Native 不支持的语法及配置，通过编译配置支持

4. 通过编译配置与 @tarojs/taro-rn-transformer 生成 React Native 的入口文件 index.ts

5. 入口文件引入 @tarojs/taro-runtime-rn 使用createReactNativeApp 进行包装

6. 页面文件引入 @tarojs/taro-runtime-rn 使用 createPageConfig 进行包装

7. 启动 metro bunlder

8. 在 React Native Shell 工程中运行 rea