React Native 0.68 版本支持

[zhiqingchen]

• 提案时间: (2022-04-22)
• 影响版本: (3.x)

概述

将默认的 RN 版本切换至 0.68，同时将 Taro 的原生部分代码进行重构，以应对将来的架构升级，降低维护成本。

动机

React Native 0.68 版本已于 2022-3-30 正式发布。0.68 是首个可选接入 New Architecture 的版本，新架构引入了 4 个激动人心的变更：

1. JavaScript Interface，让 JavaScript 直接调用到原生方法
2. Fabric，新的渲染系统
3. Turbo Modules，Native Modules 使用时加载
4. CodeGen，构建时生成 Native 代码

整体架构图如上，新架构有望为 RN 带来性能和体验上的飞跃。感兴趣的同学，可以阅读更多细节或直接上手体验。
Taro 将与 RN 社区保持同步，将默认的 RN 版本设置为 0.68。同时为了方便后续维护升级，将原生代码进行了重构。

使用案例

将 Taro 升级至最新版，将原生代码根据相关pr进行变更。

详细设计

Taro 主仓库升级至 0.68

分支：https://github.com/NervJS/taro/tree/feat/3.5

升级内容：

1. 将不兼容的RN依赖库进行升级，并验证其功能可用性。
2. 将 @types/react-native 及 react-native 进行版本更新。
3. 将 metro、@react-native-community/cli-plugin-metro 相关依赖与 0.68 使用的版本进行同步。
4. 将 @testing-library 相关测试依赖进行升级，并更新测试用例。
5. 将默认安装的RN版本进行更新 https://github.com/NervJS/taro/blob/next/packages/taro-cli/src/presets/platforms/rn.ts#L33
6. 其他问题解决
   • deprecated-react-native-prop-types

Taro Native Shell 升级至 0.68

分支：https://github.com/NervJS/taro-native-shell/tree/0.68.0

使用新的方式生成壳工程

以往对于壳工程的升级，我们通常借助React Native Upgrade Helper，进行代码对比，然后对差异文件进行修改。但是 0.68 相比 0.67 变更了 32 个文件，一一对比进行修改工作量较大。于是我们对 Taro Native Shell 的历史代码进行了梳理。

Taro Native Shell，和 React Native init 的工程的区别如下：

0. 集成了 expo
1. 集成了 Taro 依赖的所有原生库
2. debug 方式变更: 在 JS 工程中 yarn dev:rn 启动 metro server
3. release 方式变更: 在 JS 工程中 yarn buid:rn 打包 jsbundle 并通过配置 rn.output 输出到壳工程

梳理了 Taro Native Shell 的生成过程如下：

1. 使用 react-native 初始化项目

npx react-native init taroDemo --version 0.68.1

2. 使用 expo-cli 自动安装 expo

npx install-expo-modules@latest

3. 修改部分代码以支持 Taro，此部分可以直接 cherry-pick

   • [scripts] 修改 android, ios 脚本，增加 upgradePeerdeps 脚本
   • [devDependencies] 增加 install-peerdeps 和 pod-install
   • [ios] 添加相关 APP 权限说明
   • [ios] 使用亮色主题
   • [android] 添加国内 maven 源
   • [android] 添加 gif 支持
   • [android] 注释原 react native 打包
   • [android] 使用亮色主题
   • [docs] 复制该 README.md 文件
   • [license] 复制 LICENSE 文件

4. 更新 Taro 需要的依赖（如果还没正式发布，则使用对应的 alpha 或 beta 版本）

yarn
yarn upgradePeerdeps

5. 添加打包脚本，此部分可以直接 cherry-pick
   • [fastlane] 添加 Android、iOS fastlane 配置
   • [actions] 添加 Android、iOS 打包脚本
   • [ios] 添加默认图标
   • [ios] 添加 ITSAppUsesNonExemptEncryption false
   • [ios] 添加 main.jsbundle assets 引用

未来 Taro Native Shell 的版本升级，可以根据工作量的大小使用React Native Upgrade Helper或者如上步骤进行操作。

接入 github action

Taro Native Shell 工程目前缺乏 CI，以至于测试的过程仍然较为繁琐。为了让测试彻底摆脱 Android 及 iOS 开发环境，我们为该工程也加入了 GitHub Actions。修改代码后，通过添加 tag，可触发打包，然后在 Actions 页面查看打包是否正常。

# 10 为自增数字
git tag v0.68.2-10
git push origin v0.68.2-10

更多细节建议阅读《使用 Taro 高效开发 APP》。

将 Android 打包方案重构

Android 的打包过程，从调用 gradlew 改为使用 fastlane，将打包过程配置化，尽可能地减少对 RN 初始化后原生代码的入侵。相关配置位于 android/fastlane，目前仅做了基础配置，开发者可进一步自定义。

Taro Project Template 升级至 0.68

分支：https://github.com/NervJS/taro-project-templates/tree/v3.5

使用方法：

yarn global add @tarojs/cli@beta
taro init
# 选择 react-native 模板

升级内容：

1. 对 v3.5 分支代码进更新，同 Taro Native Shell 升级至 0.68。
2. 验证使用 taro init 初始化的工程能正常使用。

为了方便 taro init 功能测试，可借助 shell 工程的配置，进行打包：

# 将源设置为 shell 工程
git remote add origin [email protected]:NervJS/taro-native-shell.git

# 10 为自增数字
git tag v0.68.2-beta.10
git push origin v0.68.2-beta.10

Taro Playground 升级至 0.68

分支：

https://github.com/wuba/taro-playground/tree/releases/v1.6.0

升级内容：

0. 版本号改为 v1.6.0。
1. 更新代码同 Taro Native Shell 升级至 0.68。

安装包下载：

https://github.com/wuba/taro-playground/releases/tag/v1.6.0-beta.6

缺陷

• 0.68版本发布时间较短，及时跟进 0.68 问题。
• IPHONEOS_DEPLOYMENT_TARGET 由 11.0 改为 12.0。 需要兼容 11.0 的开发者，需要保留在低版本。

替代选择

N/A

适配策略

• Taro 主工程默认使用 0.68，保证旧版本 RN 仍正常使用新版本的 Taro。
• 有些包（如 metro）可能无法向下兼容，则需要用户使用 resolution 进行版本锁定，需要在版本更新时说明。

[ChelesteWang]

@zhiqingchen react native 0.68 存在架构大规模变化，组件存在兼容问题，主要体现于 benchmark 的 fps ，同等组件代码 0.63 可以保证 58-60 fps 而 0.68 只能保留在 28-32 fps ，可能是个例，但是希望官方可以也测试一下。

[zhiqingchen]

好提议

[zhiqingchen]

@ChelesteWang 目前未发现有低 fps 的情况，可以体验一下
https://github.com/wuba/taro-playground/releases/tag/v1.6.0-beta.6

[zhiqingchen]

Taro Native Shell 升级至 0.68 测试

对应分支

https://github.com/NervJS/taro-native-shell/commits/0.68.0

下载现有包进行验证

https://github.com/NervJS/taro-native-shell/releases/tag/v0.68.2-10

修改代码后

# 10 为自增数字
git tag v0.68.2-10
git push origin v0.68.2-10

查看打包是否正常进行

https://github.com/NervJS/taro-native-shell/actions

[zhiqingchen]

Taro Project Template 升级至 0.68 测试

对应分支

https://github.com/zhiqingchen/taro-project-templates/tree/v3.5-0.68

# 全局安装beta版本cli
yarn global add @tarojs/cli@beta

# 通过模板进行初始
taro init

# 初始化后安装依赖
yarn upgradePeerdeps

1. 修改 assemble_ios_debug.yml 配置
   1. APP_ID: ${{secrets.APP_ID}}
   2. TEAM_ID: ${{secrets.TEAM_ID}}
   3. PROVISIONING_PROFILE_SPECIFIER: ${{secrets.DEBUG_PROVISIONING_PROFILE_SPECIFIER}}
   4. CODE_SIGN_IDENTITY: Apple Development
2. 修改 assemble_ios_release.yml 配置
   1. APP_ID: ${{secrets.APP_ID}}
   2. TEAM_ID: ${{secrets.TEAM_ID}}
   3. PROVISIONING_PROFILE_SPECIFIER: ${{secrets.RELEASE_PROVISIONING_PROFILE_SPECIFIER}}
   4. CODE_SIGN_IDENTITY: Apple Distribution

# 将源设置为 shell 工程
git remote add origin [email protected]:NervJS/taro-native-shell.git

# 10 为自增数字
git tag v0.68.2-alpha.10
git push origin v0.68.2-alpha.4

查看打包是否正常进行

https://github.com/NervJS/taro-native-shell/actions

参考分支

https://github.com/NervJS/taro-native-shell/tree/test/template-0.68-1

[zhiqingchen]

Taro Playground 升级至 0.68 测试

对应分支

https://github.com/wuba/taro-playground/tree/releases/v1.6.0

包下载
https://github.com/wuba/taro-playground/releases/tag/v1.6.0-beta.4

[zhiqingchen]

Taro 主仓库升级至 0.68

对应分支

https://github.com/wuba/taro-react-native/commits/feat/3.5-68

包安装

3.5.0-zeta.7

测试点

0. metro 启动正常，远程加载正常，打包 bundle 正常
1. 文件修改热更新
2. app 或 page 配置更新后 reload

[iambool]

验证通过

[zhiqingchen]

可在3.5 beta版本使用

[eneisyou]

请问taro编译为rn如何手动开启New Architecture, 或者是默认开启的?