【公众号搬运】React-Native开发鸿蒙NEXT(2)

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

React-Native开发鸿蒙NEXT(2)

原创 悬空八只脚 悬空八只脚 2024年08月08日 23:31 江苏

最近几天实在是忙冒烟了，完全没想着更新公众号。每天上班一样维持八九个小时的开发RN，晚上休息一直在wow靠回想给小号冲级。现在是8月8日晚上10点，聊聊这阶段的开发。

简单看了下统计，在鸿蒙RN里目前已经投入了将近150个小时，整体进度估计完成了1/3。确实是个大工程，但开发难度目前还是感觉低于预期的。这点不得不说遥遥领先做的不错，还没遇到什么大的问题。刨去七月中旬开始那段刚开始接触的时间，最近两周时间的全力开发，基本已经熟悉了现有的开发方式，大部分页面已经变成相对较为单纯的代码搬运工作。一些第三方还需要调查下替代方案。算是有点心得体会了把。这里用QA的方式简单做一点记录。

Q:怎么开始用RN开发鸿蒙NEXT？A:到目前为止，对于用RN来开发所谓的纯血鸿蒙，可以看到在发布会是提到RN支持的(印象中还提到了Flutter)，但其中的技术资料，还没有公开。需要先和遥遥领先签个协议（我因为是公司之间的合作，甲方都代为做了）。协议签订后会发开发文档和相关的demo。文档比较全，涉及到如何从0开始搭建一个鸿蒙原生壳工程与RN工程，不复杂。另外像native与js之间的互相通讯，js组件与原生组件的嵌套使用，都有专门篇幅介绍。即便对于我这种基本不熟悉RN新架构的人来说，看看文档也就一步三摇上路了（文档不复杂，篇幅也不大，都是开发的基础，教你怎么直接上路，不整花活挺好）。当中遇到过一个DevEco-Studio里node版本不对的问题，可能是我mac的环境问题，最终和鸿蒙的技术支持视频讨论了下找了个变通方法解决了。

Q:用RN开发的鸿蒙可以跑Android/ios吗？

A:这个问题问了鸿蒙的技术，答复是可以的。能够一套代码跑Android/iOS/鸿蒙NEXT。要不然我也不会选择用RN来开发。js端的页面代码对鸿蒙几乎是无感的。以前判断操作系统的地方现在可能需要加判一个Platform === 'harmory'，如果需要针对鸿蒙做特殊的处理。除此以外基本和普通RN开发没有多少区别。Q:RN开发鸿蒙需要特殊的依赖吗？

A:需要，针对RN的"系统版本"和三方依赖，都需要"鸿蒙化的版本"。举几个例子，虽然只要满足RN使用0.72版本创建应用即可，但需要导入两个鸿蒙的RN核心依赖react-native-harmony和react-native-harmony-sample-package。对于三方依赖，如果是纯js库，可以尝试直接使用，能用就行。但如果有原生部分，则必须去gitee.com/react-nativ…

A:应该这么说，所谓的"鸿蒙化"三方依赖，都是基于原来依赖的二开。用法和原来的依赖基本是没有却别的。带来差异的地方是原生端的导入。目前鸿蒙的开发工具还不支持autolink，依赖的原生部分是需要手动去配置的。这点在上面提到的三方依赖网站上依赖的链接里都有详细的说明，一步步照做即可。大体上基本以下几个步骤(js端已经npm install成功后)npm run codegen，生成供harmory使用的替换文件，都在js端的entry文件夹下。

把生成的文件复制到harmony原生工程中。

解压缩本地依赖，把里面harmory文件夹下的xxxx.har复制到原生工程的libs文件夹下。我一般会把文件名后面加上版本号。

在原生工程中添加依赖

如果依赖的src下有cpp，则需要链接cpp

arkTS侧需要修改的代码和cpp其实是类似的。和Android/iOS中在RN实例中加入依赖作用是一样的。

Q:native和js如何通讯？

A:前面已经提到遥遥领先有相关文档。js->native利用RN新架构的turboModule，按照套路来，我没有用codegen生层代码的方式，而是基于demo的turboModule手动修改，这样开发阶段更加灵活便于随时修改。native->js使用的是emitter。注意最终发送消息需要用到RNInstance这个实例类型。

Q:如何查找参考资料？

A:目前来看遥遥领先的开发官网是唯一的主要参考。原因是网上大部分关于鸿蒙的开发资料，都是老版本，而非NEXT版本。NEXT和之前的版本SDK是不一样的也不能通用。参考网上资料可能存在误导（毕竟目前用的开发工具都是Beta版本的，和老版本有较大差异）。看官网资料，除了API，还有个最佳实践挺不错，大量的项目举例，如果涉及到原生页面，找到类似的项目套用都行。

困了，先写到这把。下回分解。

---

更多内容可关注

我的公众号【悬空八只脚】