diff --git a/zh-cn/autolink.md b/zh-cn/autolink.md index 1093e945947f41e647c332d906b00cf666201225..c5176b0b6141cec00acaae3e734c1ea3c70341e8 100644 --- a/zh-cn/autolink.md +++ b/zh-cn/autolink.md @@ -259,10 +259,10 @@ ext.applyNativeModulesAppBuildGradle = { Project project, String root = null -> 这 3 处变化使得 Android 的 link 过程自动化，同时避免了原生代码的改动 -## Harmony 平台的 Link +## HarmonyOS 平台的 Link -### Harmony Link +### HarmonyOS Link -### Harmony AutoLink +### HarmonyOS AutoLink -目前 Harmony 平台的 AutoLink 还在规划阶段，预计会在未来推出。 +目前 HarmonyOS 平台的 AutoLink 还在规划阶段，预计会在未来推出。 diff --git a/zh-cn/base.md b/zh-cn/base.md index d2dc3a8a75ed4885362104e99452e22894b75da2..dc6cc14c0f83942f78c0a87bea6062164226bd5a 100644 --- a/zh-cn/base.md +++ b/zh-cn/base.md @@ -6,7 +6,7 @@ React Native 是一个使用 React 和应用平台的原生功能来构建 Andro ## 视图（Views）与移动开发 -在 Android 、 iOS 和 Harmony 开发中，一个视图是 UI 的基本组成部分：屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。甚至应用程序最小的视觉元素（例如一行文本或一个按钮）也都是各种视图。某些类型的视图可以包含其他视图。全部都是视图。 +在 Android 、 iOS 和 HarmonyOS 开发中，一个视图是 UI 的基本组成部分：屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。甚至应用程序最小的视觉元素（例如一行文本或一个按钮）也都是各种视图。某些类型的视图可以包含其他视图。全部都是视图。 ## React 基础 diff --git a/zh-cn/environment.md b/zh-cn/environment.md index b98cc964a5e514b36de25c21b2ef5281ee14d562..5dbf58e4ea1eaf0cef47e5ed07276354ffa4b5ba 100644 --- a/zh-cn/environment.md +++ b/zh-cn/environment.md @@ -53,11 +53,11 @@ ios 环境主要用于效果比对和 RN Demo 的开发。因为 arkui 对标 sw 将 ios / Android 环境搭建好，并成功运行 React-Native 官方给定的 demo 后再进行下一步。 -## 搭建 Harmony 环境 +## 搭建 HarmonyOS 环境 ### IDE 和手机版本 -Harmony 环境需要注意 IDE 版本、OpenHarmony SDK 版本和手机版本是否符合要求。 +HarmonyOS 环境需要注意 IDE 版本、OpenHarmony SDK 版本和手机版本是否符合要求。 - 2023.10.30 版本： @@ -67,6 +67,14 @@ OpenHarmony(API10): 4.0.10.11 工程机版本：NOH-AN00 204.0.0.65(SP4C00E70R1P12) +- 2023.12.30 版本： + +DevEco Studio 版本：4.1.3.401 + +OpenHarmony(API11): 4.1.0.36 + +工程机版本：NOH-AN00 204.1.0.60(SP10C00E60R1P17) + ### 在 mac 上安装鸿蒙模拟器 [mac 上使用模拟器](https://harmonyosdevelopertest.devccsrnd.hwcloudtest.cn:3087/cn/docs/doc-guides-V4/run_simulator-0000001582636200-V4) @@ -79,11 +87,11 @@ RNOH 包含的内容： 1. react-native-harmony：react-native 的 Hamrony 拓展； 2. react-native-harmony-cli：react-native-cli 的 Hamrony 拓展； -3. tester：配置好 Harmony 支持的 React-Native 项目； +3. tester：配置好 HarmonyOS 支持的 React-Native 项目； - 绿区： -拉取[ReactNative_OpenHarmony](https://codehub-g.huawei.com/l00496999/ReactNative_OpenHarmony/home)项目 +拉取[ReactNative_OpenHarmony](https://codehub-g.huawei.com/ReactNativeOpenHarmony/rnoh/home)项目 - 蓝区： @@ -91,13 +99,15 @@ RNOH 包含的内容： 按需选择分支： -`master` 是最新的 RNOH 主干分支，包含了 RNOH 的核心 SDK； +`swm_main` / `main` 是SWM团队的主干分支； + +`master` / `master_green` 是HUAWEI团队的主干分支； -`third_party` 是在 `master` 的基础上，加入了 React-Native 三方库。 +`xxx_third_party` 是在 `xxx` 的基础上，加入了 React-Native 三方库。 ## 创建新项目 -> [!tip] 待完善能力：目前 harmony 还不支持新建项目的工具，需要手动引入，可跳过此步直接使用 RNOH 的 tester 项目。 +> [!tip] 待完善能力：目前 HarmonyOS 还不支持新建项目的工具，需要手动引入，可跳过此步直接使用 RNOH 的 tester 项目。 使用 React Native 内建的命令行工具来创建一个名为 "AwesomeProject" 的新项目。这个命令行工具不需要安装，可以直接用 node 自带的 npx 命令来使用： @@ -115,9 +125,9 @@ npx react-native@0.72.5 init AwesomeProject --version 0.72.5 创建工具会自动为 Android 和 ios 生成工程底座，可直接使用。 -### Harmony +### HarmonyOS -如果要使用上述创建的 AwesomeProject，需要自行引入一个 harmony 工程（一般不推荐 Harmony 平台自行新建项目，可以直接使用 RNOH 提供的示例项目 `tester`。） +如果要使用上述创建的 AwesomeProject，需要自行引入一个 harmony 工程（一般不推荐 HarmonyOS 平台自行新建项目，可以直接使用 RNOH 提供的示例项目 `tester`。） ## 编译并运行 React Native 应用 diff --git a/zh-cn/fabric.md b/zh-cn/fabric.md index 06289725e4f1054b73c41cad6198d1f772757817..f570624f6c98bac7eb036ec8220c789fff89dc09 100644 --- a/zh-cn/fabric.md +++ b/zh-cn/fabric.md @@ -8,7 +8,7 @@ Fabric 组件是一种使用 Fabric 渲染器渲染并展示在屏幕上的 UI 在开发 Fabric 组件前，需要先创建一个 JavaScript 接口描述文件。之后 Codegen 会根据这个文件创建一些 C++ 脚手架代码，用于将部分组件逻辑（比如调用原生平台接口能力）与 React Native 结合起来。C++ 代码在各个平台都是一样的，只要组件能够与生成的 C++ 代码连接起来，就可以导入到 App 并运行。 -因为 Harmony 平台暂时还没有 codegen 工具，所以我们需要使用 Android 平台的 codegen 来生成相关的 C++ 代码，然后复制到 Harmony 平台使用。 +因为 HarmonyOS 平台暂时还没有 codegen 工具，所以我们需要使用 Android 平台的 codegen 来生成相关的 C++ 代码，然后复制到 HarmonyOS 平台使用。 ## 如何创建 Fabric 组件 @@ -29,7 +29,7 @@ Fabric 组件是一种使用 Fabric 渲染器渲染并展示在屏幕上的 UI └── RTNCenteredText ├── android（Android 的原生实现代码） ├── ios（iOS 的原生实现代码） - ├── harmony（Harmony 的原生实现代码） + ├── harmony（HarmonyOS 的原生实现代码） └── src （js/ts代码） ``` @@ -279,9 +279,9 @@ ReactPackage 接口的用途是让 React Native 为使用 App 中的 ViewManager Codegen 会在 App 编译的时候自动运行。 -#### Harmony +#### HarmonyOS -Harmony 平台暂时还没有 Codegen，所以我们需要手动运行 Android 的 Codegen，然后把生成的代码复制过来使用。 +HarmonyOS 平台暂时还没有 Codegen，所以我们需要手动运行 Android 的 Codegen，然后把生成的代码复制过来使用。 > [!WARNING] 请务必先把 Android 的 Codegen 配置好再执行以下操作 @@ -326,7 +326,7 @@ codegen └── schema.json ``` -`codegen/jni/react/renderer/components/RTNCenteredText` 目录下的代码是 Harmony 需要的。将这些代码复制到 `harmony/rtn-centered-text/src/main/cpp` 文件夹下，并修改一下各文件 "include" 的路径。 +`codegen/jni/react/renderer/components/RTNCenteredText` 目录下的代码是 HarmonyOS 需要的。将这些代码复制到 `harmony/rtn-centered-text/src/main/cpp` 文件夹下，并修改一下各文件 "include" 的路径。 如 `ComponentDescriptor.h` @@ -642,15 +642,15 @@ public class RTNCenteredTextPackage implements ReactPackage { 新增的代码实例化了一个 RTNCenteredTextManager 对象，用于让 React Natve 运行时渲染 Fabric 组件。 -#### Harmony +#### HarmonyOS -Harmony 平台中 Fabric 组件的原生代码必须包含以下三个部分： +HarmonyOS 平台中 Fabric 组件的原生代码必须包含以下三个部分： 1. 创建用于实现组件的 RTNCenteredText.ets 2. 创建 index.ets 3. 修改 oh-package.json5，hvigorfile.ts，module.json5 -Harmony 第三方库目录文件结构应为如下： +HarmonyOS 第三方库目录文件结构应为如下： ```md harmony @@ -731,7 +731,7 @@ export struct RTNCenteredText { -该部分是 RTNCenteredText 的 Harmony 原生实现。 +该部分是 RTNCenteredText 的 HarmonyOS 原生实现。 创建 `index.ets` @@ -810,9 +810,9 @@ yarn add ../RTNCenteredText 1. 打开 android/gradle.properties； 2. 滑到文件底部，将 newArchEnabled 的值从 false 修改为 true。 -#### Harmony +#### HarmonyOS -> [!tip] 待完善能力：Harmony 平台目前暂时不支持 AutoLink，所以需要自行配置。 +> [!tip] 待完善能力：HarmonyOS 平台目前暂时不支持 AutoLink，所以需要自行配置。 首先使用 DevEco Studio 打开 React-Native 项目里的鸿蒙工程 `harmony` @@ -887,73 +887,28 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/pages/Index.ets`，添加： ```diff -import { ComponentBuilderContext } from 'rnoh'; -import { RNApp, RNAbility, AnyJSBundleProvider, MetroJSBundleProvider, ResourceJSBundleProvider } from 'rnoh' -import { createRNPackages } from '../RNPackagesFactory' +... import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { RTNCenteredText, CENTERED_TEXT_TYPE } from "rnoh-centered-text" - ++ import { RTNCenteredText, CENTERED_TEXT_TYPE } from "rnoh-centered-text" @Builder -function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { +export function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) - } else if (ctx.descriptor.type === PropsDisplayer.NAME) { - PropsDisplayer({ - ctx: ctx.rnohContext, - tag: ctx.descriptor.tag - }) - } else if (ctx.descriptor.type === CENTERED_TEXT_TYPE) { - RTNCenteredText({ - ctx: ctx.rnohContext, - tag: ctx.descriptor.tag - }) - } -} - -@Entry -@Component -struct Index { - @StorageLink('RNAbility') rnAbility: RNAbility | undefined = undefined - @State shouldShow: boolean = false - - aboutToAppear() { - setTimeout(() => { - // Debugger don't work from the get-go, hence this artificial delay. - this.shouldShow = true - }, 1000) - } - - onBackPress(): boolean | undefined { - // NOTE: this is required since `Ability`'s `onBackPressed` function always - // terminates or puts the app in the background, but we want Ark to ignore it completely - // when handled by RN - return this.rnAbility?.onBackPress(); - } - - build() { - Column() { - if (this.rnAbility && this.shouldShow) { - RNApp({ - rnInstanceConfig: { createRNPackages }, - initialProps: { "foo": "bar" } as Record, - appKey: "app_name", - buildCustomComponent: CustomComponentBuilder, - jsBundleProvider: new AnyJSBundleProvider([ - new MetroJSBundleProvider(), - new ResourceJSBundleProvider(this.rnAbility.context.resourceManager, 'hermes_bundle.hbc'), - new ResourceJSBundleProvider(this.rnAbility.context.resourceManager, 'bundle.harmony.js')]), - }) - } - } - .height('100%') - .width('100%') } ++ else if (ctx.componentName === CENTERED_TEXT_TYPE) { ++ RTNCenteredText({ ++ ctx: ctx.rnohContext, ++ tag: ctx.tag, ++ }) ++ } + ... } +... ``` #### JavaScript diff --git a/zh-cn/migration.md b/zh-cn/migration.md index eff750d46df236ef0a9000430b2694557bdfd22b..df4213e17fe1fd9673706ebd5640cdd9c9796c68 100644 --- a/zh-cn/migration.md +++ b/zh-cn/migration.md @@ -26,7 +26,7 @@ JavaScript Specs 是每个 Native Module 提供的方法的真实来源，定义 新架构要求必须使用强类型风格语言声明 JavaScript 接口（Flow 和 TypeScript 皆可）。Codegen 会根据这些接口声明来生成强类型的语言，其中包括 C++、Objective-C 和 Java。 -> [!tip] 目前，harmony 平台的 codegen 还在开发当中。 +> [!tip] 目前，HarmonyOS 平台的 codegen 还在开发当中。 #### Turbo Native Modules @@ -170,8 +170,8 @@ export default codegenNativeComponent( 请参考官方的[新架构迁移指南](https://reactnative.cn/docs/new-architecture-intro) -### harmony +### HarmonyOS -harmony 平台只支持新架构，所以并没有迁移的说法。 +HarmonyOS 平台只支持新架构，所以并没有迁移的说法。 关于鸿蒙原生代码，请参考鸿蒙原生侧代码中的 [C++ NAPI 层](zh-cn/cpp.md) 和 [原生层](zh-cn/native.md) 章节。 \ No newline at end of file diff --git a/zh-cn/new-architecture.md b/zh-cn/new-architecture.md index d4b83c01d6dcd2eff05ac7ca4de576444b2b37b7..bc7b134b7201eccecb02cf52610acdf39d78381f 100644 --- a/zh-cn/new-architecture.md +++ b/zh-cn/new-architecture.md @@ -9,7 +9,7 @@ 1. 新的原生模块体系 - `Turbo Modules`，一个支持与本地代码高效、灵活集成的框架。 2. `Fabric` 渲染器和组件，它提供了更好的功能、跨平台的一致性和渲染性能。 -另外还有一个帮助我们避免编写重复代码的工具 `Codegen`，它通过 JavaScript 的静态类型化，生成新架构所需的 C++ 模板。（目前仅支持 Android 和 iOS 平台，Harmony 版本还在开发中）。 +另外还有一个帮助我们避免编写重复代码的工具 `Codegen`，它通过 JavaScript 的静态类型化，生成新架构所需的 C++ 模板。（目前仅支持 Android 和 iOS 平台，HarmonyOS 版本还在开发中）。 ## 开始使用新架构 diff --git a/zh-cn/patch.md b/zh-cn/patch.md index 2b45a8af0134ce3ba527145349268c79969a40d9..9245ac04b0ec737c5a06ac9e776197ce3eed2bcd 100644 --- a/zh-cn/patch.md +++ b/zh-cn/patch.md @@ -4,29 +4,29 @@ ## 背景 -1130 前鸿蒙化后的 React-Native 三方库将 harmony 平台的修改和 Android、iOS 等平台的代码放在一起，然后覆盖原库安装。 +1130 前鸿蒙化后的 React-Native 三方库将 HarmonyOS 平台的修改和 Android、iOS 等平台的代码放在一起，然后覆盖原库安装。 这样做会面临三个问题： -1. Android 和 iOS 等其他平台需要依靠社区维护，有些库只支持老架构或只支持某个版本以下较老的 React-Native，而 harmony 只支持新架构和较新的 React-Native。如果放在一起无法保证一个库下，各个支持平台的一致性； +1. Android 和 iOS 等其他平台需要依靠社区维护，有些库只支持老架构或只支持某个版本以下较老的 React-Native，而 HarmonyOS 只支持新架构和较新的 React-Native。如果放在一起无法保证一个库下，各个支持平台的一致性； -2. 外部厂商希望 Android、iOS 和 harmony 能在同一 React-Native 工程项目内，不需要另外新建针对 harmony 平台的 React-Native 工程。而大部分外部厂商在 Android、iOS 平台用的还是老架构版本的三方库，对于一些我们适配了 harmony 平台的老架构三方库，我们既无法保证 Android、iOS 等其他平台能正常在新架构运行，也无法保证在老架构还能运行； +2. 外部厂商希望 Android、iOS 和 HarmonyOS 能在同一 React-Native 工程项目内，不需要另外新建针对 HarmonyOS 平台的 React-Native 工程。而大部分外部厂商在 Android、iOS 平台用的还是老架构版本的三方库，对于一些我们适配了 HarmonyOS 平台的老架构三方库，我们既无法保证 Android、iOS 等其他平台能正常在新架构运行，也无法保证在老架构还能运行； 3. 在开源之后需要在 Gitee 建仓，很难跟进 Github 的社区版本更新，无法直接 fork 也无法提 PR，将其他平台的代码包含进来对回合社区无任何意义。 ## 变更项及原理 -基于上述原因，经过各方面的考虑，1130 之后会对已适 harmony 平台的 React-Native 三方库进行文件结构整改，将覆盖原库的方式变更为打补丁的方式。 +基于上述原因，经过各方面的考虑，1130 之后会对已适 HarmonyOS 平台的 React-Native 三方库进行文件结构整改，将覆盖原库的方式变更为打补丁的方式。 -也就是说，将 harmony 平台的代码解耦出来，变成一个独立的 npm 包，和原来的 npm 包是依赖关系。当使用 metro 服务打包时，会根据平台和别名判断，需要去 node_modules 下哪个文件夹里取代码。 +也就是说，将 HarmonyOS 平台的代码解耦出来，变成一个独立的 npm 包，和原来的 npm 包是依赖关系。当使用 metro 服务打包时，会根据平台和别名判断，需要去 node_modules 下哪个文件夹里取代码。 -以 react-native-linear-gradient 为例，官方的 npm 包名是 react-native-linear-gradient，harmony 平台补丁的 npm 包名命名为 react-native-linear-gradient-openharmony。 +以 react-native-linear-gradient 为例，官方的 npm 包名是 react-native-linear-gradient，HarmonyOS 平台补丁的 npm 包名命名为 @react-native-oh-tpl/react-native-linear-gradient。 #### Android/iOS 当在 React-Native 项目内运行 Android 或 iOS 平台时，与正常引入该三方库没有区别，JS 端的代码和原生代码都会从 `node_modules/react-native-linear-gradient` 里查询。 -#### harmony +#### HarmonyOS @react-native-oh-tpl/react-native-linear-gradient 的 `package.json` 需要添加一个 `"harmony": {"alias"}` 字段，这个别名就是原库的名字，用于给 metro 识别打包 @@ -37,7 +37,7 @@ } ``` -当运行 harmony 平台时，metro 服务首先会进行别名查询，在每个三方库的 package.json 内查找有没有 `"harmony": {"alias"}` 字段。如有，将会和别名指向的库链接起来。 +当运行 HarmonyOS 平台时，metro 服务首先会筛选出所有含有 `harmony` 文件夹的三方库，然后再进行别名查询，在筛选出来的三方库中的 package.json 内查找有没有 `"harmony": {"alias"}` 字段。如有，将会和别名指向的库链接起来。 在打包的时候，将不会从 `node_modules/react-native-linear-gradient` 里拿取 JS 代码，而是从 `node_modules/@react-native-oh-tpl/react-native-linear-gradient` 内拿取代码，但开发者使用时， import 的库名称并不会改变，如： @@ -45,13 +45,13 @@ import LinearGradient from "react-native-linear-gradient"; ``` -这就实现了 harmony 平台和其他平台的解耦。harmony 平台因目前还不支持 Autolink，所以原生代码自行指定路径即可。 +这就实现了 HarmonyOS 平台和其他平台的解耦。HarmonyOS 平台因目前还不支持 Autolink，所以原生代码自行指定路径即可。 ## 示例 -> [!tip] 补丁包的文件结构并没有太大变化，只是将 Android 和 ios 的原生部分、部分 JS 代码和一些无关项（example 工程等）剔除了，主要由两个部分组成：harmony 原生代码和修改后的 JS 代码。 +> [!tip] 补丁包的文件结构并没有太大变化，只是将 Android 和 ios 的原生部分、部分 JS 代码和一些无关项（example 工程等）剔除了，主要由两个部分组成：HarmonyOS 原生代码和修改后的 JS 代码。 -**对于原生代码：**仅保留 harmony 平台的部分，即 `harmony` 文件夹。 +**对于原生代码：**仅保留 HarmonyOS 平台的部分，即 `harmony` 文件夹。 **对于 JS 代码：**仅保留有改动的部分，其余直接从原库里 import。 diff --git a/zh-cn/third-party.md b/zh-cn/third-party.md index 8bdc12e9604d9bc3ee4159242950f6d4a86bb446..56b4a3156a76600bb529e7519e96d92458d1bca7 100644 --- a/zh-cn/third-party.md +++ b/zh-cn/third-party.md @@ -15,15 +15,15 @@ React-Naitve 三方库主要由 JS 实现和原生实现两部分组成。通常 ## 三方库分类 -根据RN三方库的实现方式可分为：原生库，JS库，纯JS库（命名为内部自行命名），根据不同的分类会有不同的移植策略。 +根据 RN 三方库的实现方式可分为：原生库，JS 库，纯 JS 库（命名为内部自行命名），根据不同的分类会有不同的移植策略。 ### 原生库 -这类库通过原生代码实现，通常使用 Java或kotlin（Android）和 Objective-C 或 Swift（iOS）编写。原生模块提供了与底层平台直接交互的能力，可以实现对底层功能的更深度的控制。如[react-native-pager-view](https://github.com/callstack/react-native-pager-view)、[progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android)和[react-native-slider](https://github.com/callstack/react-native-slider/tree/main)。 +这类库通过原生代码实现，通常使用 Java 或 kotlin（Android）和 Objective-C 或 Swift（iOS）编写。原生模块提供了与底层平台直接交互的能力，可以实现对底层功能的更深度的控制。如[react-native-pager-view](https://github.com/callstack/react-native-pager-view)、[progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android)和[react-native-slider](https://github.com/callstack/react-native-slider/tree/main)。 **特征** -源码项目结构上通常在根目录或者package目录下有`android`或`ios`或`apple`目录，如下图： +源码项目结构上通常在根目录或者 package 目录下有`android`或`ios`或`apple`目录，如下图： ``` project-root/ @@ -32,7 +32,7 @@ project-root/ // 或者 project-root/ -|-- package/ +|-- package/ | |-- android/ # Android 应用源码和配置文件 | |-- ios/ # iOS 应用源码和配置文件 ``` @@ -41,18 +41,18 @@ project-root/ 这类库需要参考原库逻辑来移植，有着如下移植点： -- RN JS侧适配新架构 -- RN JS侧适配harmony平台 -- 利用codegen搭建Bridge的通信通道（开发相对固定） -- 使用arkts复刻原库逻辑实现原库效果 +- RN JS 侧适配新架构 +- RN JS 侧适配 HarmonyOS 平台 +- 利用 codegen 搭建 Bridge 的通信通道（开发相对固定） +- 使用 arkts 复刻原库逻辑实现原库效果 -### JS库 +### JS 库 这类库专门为 React Native 开发，但不涉及原生实现，利用 React Native 提供的桥接机制和 API 来实现其功能，或者通过其他三方库实现二次封装的功能。如[recyclerlistview](https://github.com/Flipkart/recyclerlistview)、[react-navigation](https://github.com/react-navigation/react-navigation)和[react-native-qrcode-svg](https://github.com/awesomejerry/react-native-qrcode-svg) **特征** -源码项目结构上不包含原生相关目录（android/ios/apple）,且package.json中对react-native有依赖。 +源码项目结构上不包含原生相关目录（android/ios/apple）,且 package.json 中对 react-native 有依赖。 ``` package.json @@ -70,22 +70,22 @@ package.json **移植** -由于是基于RN接口的封装，所以涉及较少的开发工作，移植点包含： +由于是基于 RN 接口的封装，所以涉及较少的开发工作，移植点包含： -- RN JS侧适配harmony平台 +- RN JS 侧适配 HarmonyOS 平台 - 大量测试对比 -### 纯JS库 +### 纯 JS 库 这类库是纯粹的 JavaScript 模块，不依赖 React Native 平台的特定功能，可以在多种 JavaScript 环境中运行。如[lodash](https://github.com/lodash/lodash)、[deepmerge](https://github.com/TehShrike/deepmerge)和[styled-system](https://github.com/styled-system/styled-system) **特征** -源码项目结构上不包含原生相关目录（android/ios/apple）,且package.json中对react-native无依赖。 +源码项目结构上不包含原生相关目录（android/ios/apple）,且 package.json 中对 react-native 无依赖。 **移植** -由于是基于RN接口的封装，所以没有开发工作，主要是测试对应各个平台效果是否一致，不一致则需要反馈给框架层。因为使用的RN引擎是一致的，所以通常来说接口都是正常可用的。 +由于是基于 RN 接口的封装，所以没有开发工作，主要是测试对应各个平台效果是否一致，不一致则需要反馈给框架层。因为使用的 RN 引擎是一致的，所以通常来说接口都是正常可用的。 ## 三方库使用 diff --git a/zh-cn/turbomodule.md b/zh-cn/turbomodule.md index 781fdc9412d2875f58d8bdcb6c9e171e4b7fb9ca..ce1a25f064a7163ccbbc08f226fb440c0cada667 100644 --- a/zh-cn/turbomodule.md +++ b/zh-cn/turbomodule.md @@ -27,7 +27,7 @@ Turbo Modules 是升级版的 Native Modules，是基于 JSI 开发的一套 JS └── RTNCalculator ├── android（Android 的原生实现代码） ├── ios（iOS 的原生实现代码） - ├── harmony（Harmony 的原生实现代码） + ├── harmony（HarmonyOS 的原生实现代码） └── src （js/ts代码） ``` @@ -89,7 +89,7 @@ export default TurboModuleRegistry.get("RTNCalculator") as Spec | null; 有一些配置文件在 Android/iOS 平台是通用的，而有的仅能在某一平台使用。 -Harmony 平台暂时不支持 Codegen，TurboModule 的 C++ 代码需要自行编写。 +HarmonyOS 平台暂时不支持 Codegen，TurboModule 的 C++ 代码需要自行编写。 #### Shared @@ -266,9 +266,9 @@ ReactPackage 接口的用途是让 React Native 为使用 App 中的 ViewManager Codegen 会在 App 编译的时候自动运行。 -#### Harmony +#### HarmonyOS -> [!tip] 待完善能力：因为 Harmony 平台暂时不支持 Codegen，也不能复用安卓的 C++ 代码，所以这部分需要自行编写和添加。 +> [!tip] 待完善能力：因为 HarmonyOS 平台暂时不支持 Codegen，也不能复用安卓的 C++ 代码，所以这部分需要自行编写和添加。 在 `harmony/rtn-calculator/src/main/cpp` 目录下创建： `CMakeLists.txt`，`CalculatorPacakge.h`，`CalculatorTurboModule.h`，`CalculatorTurboModule.cpp`。 @@ -511,16 +511,16 @@ public class CalculatorPackage extends TurboReactPackage { 这就是 Android 平台原生代码的最后一部分，它定义了 TurboReactPackage 对象，这个对象将用于 App 的模块加载。 -#### Harmony +#### HarmonyOS -Harmony 平台上 Turbo Native Module 的原生代码需执行如下步骤： +HarmonyOS 平台上 Turbo Native Module 的原生代码需执行如下步骤： 1. 创建用于实现模块的 CalculatorModule.ts 2. 创建 CalculatorPackage.ts 3. 创建 index.ets 和 ts.ts 4. 修改 oh-package.json5，hvigorfile.ts，module.json5 -Harmony 第三方库目录文件结构应为如下： +HarmonyOS 第三方库目录文件结构应为如下： ```md harmony @@ -596,7 +596,7 @@ export class CalculatorPackage extends RNPackage { -这就是 Harmony 平台原生代码的最后一部分，它定义了 RNPackage 对象，这个对象将用于 App 的模块加载。 +这就是 HarmonyOS 平台原生代码的最后一部分，它定义了 RNPackage 对象，这个对象将用于 App 的模块加载。 创建 `ts.ts` 和 `index.ets` @@ -686,11 +686,11 @@ yarn add ../RTNCalculator 1. 打开 android/gradle.properties； 2. 滑到文件底部，将 newArchEnabled 的值从 false 修改为 true。 -#### Harmony +#### HarmonyOS -> [!tip] 待完善能力：Harmony 平台目前暂时不支持 AutoLink，所以需要自行配置。 +> [!tip] 待完善能力：HarmonyOS 平台目前暂时不支持 AutoLink，所以需要自行配置。 -首先使用 DevEco Studio 打开 React-Native 项目里的鸿蒙工程 `harmony` +首先使用 DevEco Studio 打开 React-Native 项目里的 HarmonyOS 工程 `harmony` ##### 引入原生端代码