React Native 老项目适配 Harmony

目光朝朝
978 阅读3分钟

公司有需求将现有的react native项目适配鸿蒙，项目比较老情况大概为

  1. 项目的rn版本为0.6.xx
  2. 项目使用了的依赖有多数为fork下来自己修改过的
  3. 项目所用的依赖库版本比较老

面临的问题大概有下面几个

  1. harmony只支持react native 0.72.5
  2. 多数依赖需要升级版本到鸿蒙支持版本
  3. 有的库需要鸿蒙原生代码支持，需要安装鸿蒙适配库 可以参考：react-native-oh-library.github.io/usage-docs/…

怎么做

我的思路是先提升rn版本，跑起 android， 因为升级rn的缘故会导致项目依赖改变，有的库不支持新版的rn，所以遇到问题解决问题

  1. 升级rn可以使用官方工具react-native-community.github.io/upgrade-hel…

image.png输入当前版本和需要升级到的版本可以diff文件，根据结果手动修改文件

  1. 升级之后跑安卓根据具体库的报错判断库是否需要升级，针对依赖库进行升级
  2. 跑起安卓后添加鸿蒙依赖 参考gitee.com/openharmony… （新项目可以尝试juejin.cn/post/745832… 进行集成）
  3. 根据鸿蒙端报错判断库是否需要安装鸿蒙适配库 参考github.com/react-nativ… 该文档为鸿蒙rn适配库文档可以搜索库是否鸿蒙化支持
  4. 支持则安装鸿蒙适配库，不支持则先注释掉相关代码保证不报错运行项目后面看如何处理（砍掉需求或者自己做适配为开源做贡献？）
  5. 你运行起了项目（你很有耐心），目前我也只做到这一步

后面的思路

具体问题具体解决，可能有的库没有安装鸿蒙适配库导致某些功能有问题，但是不报错项目可以正常运行，功能会有所出入，比如懒加载功能，轮播图不自动播放了，又或者动画卡顿，面临的这些问题大多数情况应该是某些库没有切换鸿蒙适配库的缘故。（猜想假设）

鸿蒙适配库的使用方法

具体使用方法上面提到的官方文档有提到，需要注意以下几点：

  1. 有的适配库需要原生代码，这类型的库必须手动链接（大概意思就是rn侧库的引入不变，用法不变，但是鸿蒙要处理你在引用这个库的时候用的是我鸿蒙的适配库的代码所以就需要处理路径问题）
  2. CMakeLists.txt文件设置变量将库的cpp文件夹添加进来（文档有明确写）
  3. 有的库适配了Codegen需要生成桥接代码（参考react-native-oh-library.github.io/usage-docs/… ！！注意参数）

那基本就是这样啦

关于适配鸿蒙我也在摸索，如果有好的适配方法或者建议，我不建议请你喝杯咖啡，我是目光先这样喽！！

新项目模板 github.com/keke521jie/…

参考文档

avatar
文章
阅读
粉丝