React Native鸿蒙化关于第三方库安装问题_鸿蒙接入rn

技术文档

最近在学习RN适配鸿蒙的过程中，对于安装各种第三方库踩坑各种报错，最终研究后解决了大部分，今天写一篇文档来记录一下踩坑的过程。

首先，RN环境搭建就不赘述了，目前@rnoh/react-native-openharmony最新稳定发布版本为0.72.53，0.72.59的版本暂时未正式发布，尝试过安装最新版本0.72.59，后续发现装第三方库会出现各种兼容性问题。附react-native-openharmony的gitee发布地址：docs/zh-cn/版本说明.md · OpenHarmony-SIG/ohos_react_native - Gitee.com

环境搭建可以参考这篇文章：ReactNative鸿蒙化从基础到应用_react native 鸿蒙-CSDN博客

根据官方的环境搭建步骤搭建完成以后，会将RN端和鸿蒙端分离。运行项目之前可以使用Metro热加载来进行热更新和调试设置，启动Metro的方法我写成了一个小脚本，见文章末尾链接（前提必须安装hdc）。若是分离状态进行开发，安装第三方库时请看下面方法（本文所有三方库安装均基于openharmonyRN版本0.72.53）：

1. 选择第三方库版本

react-native-onpenharmony三方库官方汇总链接：usage-docs: react native openharmony 三方库说明文档

以安装@react-native-picker/picker为例

官方安装方法链接：
zh-cn/react-native-picker-picker.md · react-native-oh-library/usage-docs - Gitee.com

我们需要首先进入github的Releases 发布地址查看对应版本信息。

可以看到最新的是0.3.0版本，但是千万不要直接输入以下命令安装，它会默认安装最新版本的三方库导致和RN的openharmony版本不兼容！

npm install @react-native-oh-tpl/picker

我们从github的release发布地址页面往下翻，直到看到可适配的RNharmony版本，如下图的0.72.29，即可下载此版本的三方库。

2. 双端下载

（1）RN端

首先在RN端下载此三方库（必须），一定要在RN端先下载此库，在RN端根目录下执行以下命令（一定要限定版本）：

npm install @react-native-oh-tpl/picker@2.6.1-0.2.5

下载完成后执行CodeGen桥接代码（必须），不论安装哪个三方库，不管文档有没有写需要执行，最好都执行一次，以免缺失文件。官方安装步骤（比较繁琐）：zh-cn/react-native-picker-picker.md · react-native-oh-library/usage-docs - Gitee.com

简化一下步骤如下：先在RN端中的Package.json添加配置

... \"scripts\": { ... \"codegen\": \"react-native codegen-harmony --cpp-output-path ./harmony/entry/src/main/cpp/generated --rnoh-module-path ./harmony/entry/oh_modules/@rnoh/react-native-openharmony\" }, ...

在RN端的根目录执行cmd命令：

执行以后会生成桥接文件，会多出两个generated文件夹。分别位于RN端下的harmony\\entry\\oh_modules\\@rnoh\\react-native-openharmony中，和harmony\\entry\\src\\main\\cpp中，这两个generated文件夹极为重要，后续将分别添加到鸿蒙端中相应的位置。

之后，直接根据官网的步骤在鸿蒙端中配置 CMakeLists 和引入 RNOHGeneratedPackage（C++）

（2）鸿蒙端

这里我直接在鸿蒙端也同样使用npm进行了三方库的安装，不过根据官网说直接可以引用har包进行配置，我没有尝试过，有兴趣的小伙伴可以自己试试。即在鸿蒙端的项目根目录下也执行和上面相同的npm命令：

安装以后，根据此三方库的官网步骤进行手动Link。以下操作均在鸿蒙端

注意，这里问题来了，安装完库以后，先不要急着在IDE内点击Sync进行同步。先完成上面的依赖添加。在entry下和工程级下oh-package.json5中添加字段时可能会报找不到此文件的错误，这是因为这里文档默认用户使用的是本地安装鸿蒙化依赖，但是官网步骤是安装的远程依赖，所以上面两个位置的oh-package.json5中的语句都应该改为：

直接写版本号即可。

由于picker我是直接npm安装的，所以picker.har的路径也要改一下，如下：

所有的三方库都安装在根目录下的node_moudles/@react-native-oh-tpl内。

以后每次安装新的库都要在这里添加新库的依赖。

至此可以点击Sync进行同步。之后的步骤可以继续根据官网步骤照样走就行了。

3. 添加桥接代码（最重要）

各种引入添加完成后最关键的步骤来了，还记得第二步中RN端下生成的两个generated文件夹嘛？现在必须要添加到鸿蒙端中。RN端中将cpp文件夹下的generated文件夹复制到鸿蒙端的entry/src/main/cpp中。将RN端中oh_modules\\@rnoh\\react-native-openharmony下的generated文件夹复制到鸿蒙端的entry/oh_modules/@rnoh/react-native-openharmony文件夹下