支持RN鸿蒙化，使Taro-RN鸿蒙化

[Chen-jj]

• 提案时间: 2023-05-18
• 影响版本: 3.x
• 相关 Issues: N/A

概述

通过RN鸿蒙化，以及实现Taro-RN所依赖的RN三方库，从而完成Taro的鸿蒙化。

动机

使用Taro-RN的应用如果需要鸿蒙化，并且为了尽可能减少应用代码的修改量，那么比较好的做法是将RN鸿蒙化，然后通过Taro RN 支持可以完成Taro-RN的鸿蒙化，最终达到Taro-RN应用快速鸿蒙化的效果。

使用案例

如果提案新增或更改 API ，需要带上一个基本的代码案例。
Taro-RN鸿蒙化的使用案例遵循现有的模式，其中打包js bundle

yarn build:rn --platform openharmony

对应的启动命令

yarn openharmony

详细设计

设计思路按照React Native 端开发流程展开

1. 在模版工程中新增OpenHarmony的实现，复用RN鸿蒙化的工作。
2. RN metro新增OpenHarmony打包，复用RN鸿蒙化的工作。
3. 样式转换不需要新增功能。
4. 由于RN鸿蒙化的版本是0.71.3，并且采用的RN新架构，意味着Taro-RN使用的三方库鸿蒙化适配需要使用新架构。

新增RN三方库的鸿蒙化的列表

RN三方库	优先级	工作量
react-native-gesture-handler	高	高
react-native-safe-area-context	高	低
react-native-screens	中	中
react-native-pager-view	中	高
react-native-reanimated	低	高
react-native-svg	中	高
react-native-image-pan-zoom	中	极低，纯JS
react-native-image-resizer	中	低
react-native-zoom-viewer	中	极低，纯JS
react-native-known-styling-properties	中	极低，纯JS
react-native-mocker	低	低，纯JS
react-native-modal-popover	中	低，纯JS
react-native-root-modal	中	低，纯JS
react-native-root-sibling	中	低，纯JS
react-native-root-toast	中	低，纯JS
react-native-segmented-control	中	中
react-native-stylekit	中	低，纯JS
react-native-svg-transformer	中	低，纯JS
react-native-syan-image-picker	中	中
react-native-test-app	低	低，纯JS
react-native-a11y	低	低，纯JS
react-native-builder-bob	中	低，纯JS
react-native-cameraroll	低	高
react-native-collapsible	低	低，纯JS
react-native-device-info	高	低

Expo三方库	优先级	工作量
expo	待评估	待评估
expo-application	待评估	待评估
expo-asset	待评估	待评估
expo-av	待评估	待评估
expo-barcode-scanner	待评估	待评估
expo-brightness	待评估	待评估
expo-camera	待评估	待评估
expo-cli	待评估	待评估
expo-constants	待评估	待评估
expo-error-recovery	待评估	待评估
expo-file-system	待评估	待评估
expo-font	待评估	待评估
expo-image-loader	待评估	待评估
expo-image-picker	待评估	待评估
expo-internal	待评估	待评估
expo-keep-awake	待评估	待评估
expo-location	待评估	待评估
expo-sensors	待评估	待评估
expo-web	待评估	待评估

缺陷

1. 由于短期RN鸿蒙化适配不能合入到RN社区，下载RN代码不能通过npm来拉取
2. 由于RN鸿蒙化仅支持新架构，因此新增RN三方库都需要采用新架构

替代选择

N/A

适配策略

1. 已有Taro-RN的应用进行鸿蒙化，只需要将平台依赖的部分进行鸿蒙化即可完成适配。
2. 还未使用Taro-RN开发的应用适配策略可以参考Taro RN 支持的适配策略

[Chen-jj]

@zhiqingchen

[ShaoGongBra]

是叫鸿蒙化，是个什么概念

[zhiqingchen]

基于 Taro 的哪个版本进行兼容？

当前鸿蒙 RN 使用 0.72 与 Taro 4.x (0.73) 的版本最接近，应该基于 4.x 。

RN 版本的选择？

JS 部分应当同时兼容 0.72 和 0.73。用户可以根据自身需要使用不同的 RN 版本。

采用什么模式进行开发？

分离模式 先进行验证。

1. 壳工程按照鸿蒙提供的文档进行搭建。
2. js 工程使用 Taro init 生成。

metro 配置合并

Taro RN 和 鸿蒙 RN，均自定义了 metro config，此部分存在冲突，需要解决。

第三方库的兼容

本 RFC 不包含第三方库兼容，第三方库兼容的开发进展参考：
https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/README

适配时先保证不依赖第三方库的基础功能正常，在第三方库完成适配后，再引入验证及兼容。

[zhiqingchen]

包	文档
@bam.tech/react-native-image-resizer
@react-native-async-storage/async-storage	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-async-storage-async-storage
@react-native-camera-roll/camera-roll	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-cameraroll
@react-native-clipboard/clipboard	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-clipboard-clipboard
@react-native-community/geolocation	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-geolocation
@react-native-community/netinfo	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-community-netinfo
@react-native-community/slider	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-community-slider
@react-native-masked-view/masked-view	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-masked-view-masked-view
@react-native-picker/picker	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-picker-picker
expo
expo-av
expo-barcode-scanner
expo-brightness
expo-camera
expo-file-system
expo-image-picker
expo-keep-awake
expo-location
expo-sensors
react-native-device-info
react-native-gesture-handler	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-gesture-handler
react-native-pager-view	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-pager-view
react-native-safe-area-context	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-safe-area-context
react-native-screens	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-screens
react-native-svg	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-svg
react-native-webview	https://react-native-oh-library.gitee.io/usage-docs/#/zh-cn/react-native-webview

[ShaoGongBra]

@zhiqingchen 你们是要官方实现这些库的鸿蒙端吗？这工作量看着都很多呀，还有个问题，这些库能实现，expo的库怎么去实现，expo的库是不是难度更大

[ShaoGongBra]

这个官方是你们58，还是华为官方

[ShaoGongBra]

Taro里面使用多很多expo依赖，如果expo相关的依赖不实现鸿蒙端的话，Taro的RN也没办法实现鸿蒙端吧

[zhiqingchen]

可以，相应功能不支持，不影响编译。

[zhiqingchen]

后续如果支持，补上就行

[ShaoGongBra]

RN能不能再次发扬光大，就看这个鸿蒙端能不能做起来了

[zhiqingchen]

4.x beta 版本可以试用