一分钟教会你,如何在Taro中使用原生鸿蒙编写组件

285 阅读2分钟

1、背景

taro现在也支持转换为鸿蒙了,但是依旧会有一些不足导致taro提供的组件并不能满足我们的需求。

此时就需要使用原生的鸿蒙来编写组件在taro中调用即可

2、思路

简单看了下taro转鸿蒙(ets)的方案

先使用ets写好组件后在这里进行导入

image.png

然后遍历componentList列表生成好放到render.ets里面

image.png

3、解决方案

因为自己是在公司项目中修改的代码,所以这里只讲实现步骤。当然如果你有使用原生鸿蒙编写组件需求的话按照我的伪代码来也可以很快改好自己的代码

既然知道taro是如何进行匹配转换为ets的,那么到这一步就简单了。

我们可以自己按照taro现在的ets案例写好自定义组件,然后再将编译后的代码复制到taro/components里就可以了

具体修改的代码是在node_modules/@tarojs/vite-runner/dist/harmony/template/render.js

3.1、创建harmonyComponents目录

与src同级创建目录(当然你可以放到任何你想要的位置,我这里图方便就与src同级了)

3.2、编写原生鸿蒙代码

node_modules\@tarojs\plugin-platform-harmony-ets\dist\components-harmony-ets中的组件复制一个出来,仿照taro的写法编写一个自定义组件

3.3、添加自定义代码

在运行taro命令运行前先将写好的代码复制到node_modules\@tarojs\plugin-platform-harmony-ets\dist\components-harmony-ets下(当然我图省事,我直接将代码丢到了编译后的鸿蒙壳工程中了)

node_modules/@tarojs/vite-runner/dist/harmony/template/render.js中将自己写好的组件暴露出去,注册到render.ets文件中(注意,在render.ets中所有的tegName都会变为大写,譬如你的自定义组件叫做test,那么这里匹配的teagName就是TEST,具体可以自己调试一下看看就知道了)

3.4、使用原生组件

jsx('test', {})

我这里为啥要用jsx呢,因为直接<test></test>没有类型提示,要去改类型很麻烦,所以直接用jsx了 image.png 当然我写了个类型方法包裹它让它能有个提示

结语

哦,记得打个补丁npx patch-package @tarojs/vite-runner

以上,就可以使用原生的鸿蒙编写组件,来供给taro调用了。当然这种方法还是属于下策,毕竟修改了taro的代码嘛,后面taro升级了还要再去做适配。还是比较希望taro能够放个口子让我们自己写原生的组件。

issue已经提了,就看taro的大哥大姐们有没有空搞了,我看现在1000多个open,先这样用着吧