@ohos-cpf/3rdloop 0.0.1

package/vendor/Server/Skills/rn-library-documentation-quality-check/SKILL.md

@@ -0,0 +1,263 @@
+---
+name: rn-library-documentation-quality-check
+description: 对 RN 三方库的鸿蒙化代码进行文档质量检视，聚焦 source/ohos/ 下的 API 注释完整性、鸿蒙化适配说明、README/CHANGELOG 规范、代码示例质量、类型声明文档、国际化等维度，生成严苛评分报告（0-100分）。作为 RN 仓库检视流程的第六阶段。Use when 需要对 RN 鸿蒙化库进行文档质量评估、API 文档审查、适配说明完整性检查。
+license: Apache-2.0
+compatibility: 需要访问源码目录、分析文档和注释，读取 README/CHANGELOG/.d.ts 等文件；可选调用 MCP Gateway 的 gitcode_get_raw_file 获取外部文档
+metadata:
+  version: "1.0.0"
+---
+
+# RN 鸿蒙化库文档质量检视
+
+对 RN 三方库的**鸿蒙化实现代码**进行文档质量检视，评估 API 文档完整性、鸿蒙化适配说明、README/CHANGELOG 规范、代码示例质量、类型声明文档、国际化等关键文档指标。
+
+> ⚠️ **核心原则：不凭空捏造。** 所有检视结果必须基于实际读取到的文档和源码，禁止输出推测性结论。
+
+> ⚠️ **核心定位**：本 SKILL **仅检视鸿蒙化版本的文档质量**，检视范围：源码 API 注释（TSDoc/JSDoc）、`.d.ts` 类型声明注释、README/CHANGELOG 文档、鸿蒙化适配说明、使用示例和集成指南、`module.json5` 权限与配置说明。
+
+> ⚠️ **排除范围**：上游 RN 原库文档不在检视范围内，仅评估鸿蒙化新增/修改的文档内容。
+
+---
+
+## 任务参数
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `repoUrl` | string | ✅ | 鸿蒙化仓库地址 |
+| `outputDir` | string | ✅ | 输出目录绝对路径 |
+| `interfaceDocPath` | string | ✅ | 接口规格说明文档路径（通常为 `{outputDir}/接口规格说明.md`，由前置 `rn-library-interface-analyzer` 生成） |
+| `repoName` | string | ✅ | 仓库名称 |
+| `rndocUrl` | string | ❌ | 外部文档地址。当识别到跳转文档模式时，如果传入了 rndocUrl，优先使用 rndocUrl 下载文档，而非从 README 链接提取或构造标准 URL |
+
+---
+
+## 输入依赖
+
+本 SKILL 是 RN 仓库检视流程的**第六阶段**，依赖：
+
+- **前置 SKILL**: `rn-library-interface-analyzer`（第一阶段已生成接口规格说明文档）
+- **前置 SKILL**: `rn-library-memory-leak-check`（内存泄露检视已完成）
+- **输入文件**: `接口规格说明.md`、`内存泄露检视报告.md`（位于 outputDir）
+- **仓库源码**: `{outputDir}/source/ohos/`
+- **接口规格说明文档**（`{outputDir}/接口规格说明.md`）：包含完整的 API 列表、参数签名、鸿蒙化差异（缺失/新增/变更），是交叉验证的权威基准
+
+---
+
+## 工作流程概览
+
+```
+Phase 1: 文档文件定位与收集（识别内嵌/跳转模式，收集本地+外部文档）
+    ↓
+Phase 2: 逐维度文档质量检视（7大维度，按检查项清单逐一检视）
+    ↓
+Phase 2.5: 文档与接口规格交叉验证（强制环节，以接口规格说明为权威基准）
+    ↓
+Phase 3: 文档质量评分计算（维度加权扣分制，0-100分）
+    ↓
+Phase 4: 报告生成（六章节结构化报告）
+```
+
+---
+
+## 检视维度与评分标准
+
+### 维度权重分配
+
+| 维度 | 权重 | 扣分上限 | 说明 |
+|------|------|----------|------|
+| API 文档完整性 | 20% | -20 | TSDoc/JSDoc 注释、参数/返回值/异常说明 |
+| 鸿蒙化适配说明 | 20% | -20 | 适配说明文档、差异说明、平台限制 |
+| 代码仓基础信息 | 15% | -15 | package.json 元数据、README 结构、LICENSE、发布配置 |
+| 代码示例质量 | 10% | -10 | 示例可编译性、集成步骤、Demo |
+| 变更记录与版本规范 | 10% | -10 | CHANGELOG、版本号、鸿蒙化变更 |
+| 文档与代码交叉验证 | 15% | -15 | 文档接口与代码实现双向一致性、接口规格对齐 |
+| 文档准确性与国际化 | 10% | -10 | 文档代码一致性、国际化支持 |
+
+### 严重度定义
+
+| 严重度 | 单项扣分 | 说明 |
+|--------|----------|------|
+| Critical | -8 | 文档严重缺失导致用户无法使用核心功能 |
+| Major | -4 | 文档缺失或不规范，影响用户理解和使用 |
+| Minor | -1 | 文档轻微不规范，不影响功能使用 |
+
+### 归零规则
+
+- 文档完全空白（无 README、无 API 注释、无任何示例）→ 评分直接 **0 分**
+- 核心 TurboModule/NAPI 接口无任何文档说明 → 评分直接 **0 分**
+
+> 各维度的详细检查项清单（编号 AD/DT/NP/NC/CE/TG/HA/RM/CF/EX/CL/AC/XC-xxx）参考 [references/CHECK_CHECKLIST.md](references/CHECK_CHECKLIST.md)（按需加载）。
+
+---
+
+## Phase 1：文档文件定位与收集
+
+RN 三方库的文档存在**两种分布模式**，必须先识别模式再进行收集：
+
+| 模式 | 特征 | 典型库 |
+|------|------|--------|
+| **内嵌文档** | README.md / README_zh.md 包含完整的安装、链接、接口说明、约束与限制 | `react-native-svg`、`react-native-linear-gradient` |
+| **跳转文档** | README.md 极简（仅含包名+许可证），"文档"章节指向外部集中式文档仓库 | `react-native-network-info`、`react-native-device-info` |
+
+### 步骤 1.1：识别文档模式
+
+读取仓库根目录的 `README.md`，检查是否包含跳转特征（`OpenHarmony-RN/usage-docs` 链接等）。
+
+### 步骤 1.2：收集本地文档文件
+
+收集 `*.md`、`*.d.ts`、`*.json5`、`*.txt` 等文档文件。确认关键文件清单存在性。
+
+### 步骤 1.3：收集外部跳转文档（跳转模式专属）
+
+若识别为跳转模式，**必须**获取外部文档内容作为检视依据。获取优先级：**rndocUrl > README 链接提取 > 标准 URL 构造**。
+
+> **MCP 工具可选**：若 MCP Gateway 可用，可调用 `gitcode_get_raw_file` 工具获取 GitCode 上的外部 usage-docs，比 curl 更可靠。
+
+> 完整的文档收集流程、识别信号、文件分类规则、边界场景处理参见 [references/DOC_COLLECTION_GUIDE.md](references/DOC_COLLECTION_GUIDE.md)。
+
+---
+
+## Phase 2：逐维度文档质量检视
+
+按维度 1-7 逐一检视，对每个发现的问题记录：
+
+1. **严重度**：Critical / Major / Minor
+2. **文件路径**：问题所在文件
+3. **行号/位置**：问题在文件中的位置
+4. **检查项编号**：AD/DT/NP/NC/CE/TG/HA/RM/CF/EX/CL/AC/XC-xxx
+5. **问题描述**：缺少什么或存在什么问题
+6. **修复建议**：具体的改进方案
+
+**检视顺序建议**：README → .d.ts 文件 → 配置文件 → CHANGELOG 和示例
+
+> 完整检查项清单参考 [references/CHECK_CHECKLIST.md](references/CHECK_CHECKLIST.md)。检视示例参考 [references/EXAMPLES.md](references/EXAMPLES.md)。
+
+---
+
+## Phase 2.5：文档与接口规格交叉验证（强制环节）
+
+> ⚠️ **本环节为强制执行**，不可跳过。
+
+以**前置 SKILL `RNLibraryInterfaceAnalyzer` 生成的接口规格说明文档**为权威基准，与用户文档（README/外部 usage-docs）中的 API 描述进行比对。
+
+**核心步骤**：
+1. **加载接口规格说明文档** — 从 `{outputDir}/接口规格说明.md` 提取 API 清单、签名、鸿蒙化差异
+2. **从用户文档提取 API 清单** — 从 README/外部 usage-docs 提取文档声称的接口信息
+3. **双向比对** — 规格→文档、文档→规格、签名与类型、鸿蒙化差异
+4. **权限与配置比对** — module.json5 权限声明 vs 文档说明
+5. **生成交叉验证差异报告** — 结构化表格输出
+
+> 若接口规格说明文档不存在，记录 XC-001 Critical，跳过交叉验证，在报告中注明。
+
+> 完整交叉验证流程、比对逻辑、差异分类参见 [references/CROSS_VALIDATION_GUIDE.md](references/CROSS_VALIDATION_GUIDE.md)。
+
+---
+
+## Phase 3：文档质量评分计算
+
+基于检视结果进行**严苛评分**（0-100分），采用维度加权扣分制：
+
+```
+基础分 = 100
+
+每个维度内扣分规则：
+- Critical: 每项 -8 分
+- Major: 每项 -4 分
+- Minor: 每项 -1 分
+
+维度实际扣分 = min(扣分上限, Critical扣分 + Major扣分 + Minor扣分)
+
+归零检查：
+- 文档完全空白 → 最终分 = 0
+- 核心 TurboModule/NAPI 接口无任何文档说明 → 最终分 = 0
+
+最终分 = max(0, 100 - 各维度实际扣分之和)
+```
+
+**评分等级**：90-100 优秀 | 80-89 良好 | 70-79 一般 | 60-69 较差 | 50-59 严重不足 | <50 极差
+
+---
+
+## Phase 4：报告生成
+
+在 `{outputDir}` 下生成 `文档质量检视报告.md`，包含六个章节：检视概览、综合评分、各维度评分明细、检视维度详情、问题清单、改进建议。
+
+> 完整报告模板和评分计算示例参考 [assets/REPORT_TEMPLATE.md](assets/REPORT_TEMPLATE.md)。
+
+**关键格式要求**：
+- 报告必须包含 `**综合评分：XX/100**` 格式，位于"二、综合评分"章节
+- 确保可被 `_parseRNLibraryScore` 函数正确解析
+- 评分正则匹配优先级为 `综合评分` > `总体评分/评分` > `得分`
+
+---
+
+## 输出产物
+
+| 产物 | 文件名 | 说明 |
+|------|--------|------|
+| 文档质量检视报告 | `文档质量检视报告.md` | 各维度评分明细 + 问题清单 + 修复建议 |
+
+所有产物写入 `{outputDir}` 目录。
+
+> ⚠️ **输出文件自检**：写入结果文件前，先确认 `文档质量检视报告.md` 已存在且内容完整（**独立文件，禁止只写入 result 执行结果文件**）。若报告内容仅在草稿中，必须先将其保存为上述独立文件。
+
+### 结构化指标输出（必须执行）
+
+执行环境会在任务 prompt 中下发一个**结构化指标文件输出路径**（`stepId{X}_loop{L}_meta_{N}.json`）。
+检视完成后，**必须**将最终评分以下述 JSON 对象写入该路径：
+
+```json
+{
+  "documentationScore": 85,
+  "scoreReason": "API注释缺失率40%-8等（一句话判定依据，≤50字；触发一票否决时必须注明）"
+}
+```
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `documentationScore` | number | 文档质量评分（0-100 整数，与报告中 `**综合评分：XX/100**` 的数值一致） |
+| `scoreReason` | string | 评分判定依据摘要（可选，前端悬浮提示展示；0 分时强烈建议写明触发规则，如"核心接口无任何文档说明触发归零"） |
+
+**说明**：该文件由执行框架自动收割入库（前端/历史列表直接读取评分，无需解析报告文本）。若 prompt 未下发该路径则跳过本节。
+
+---
+
+## 评分权重
+
+本 SKILL 在 RN 仓库检视综合评分中权重为 **10%**。
+
+---
+
+## 常见陷阱（Gotchas）
+
+以下为检视中最高频的 5 个陷阱，完整列表参见 [references/GOTCHAS.md](references/GOTCHAS.md)。
+
+- **跳转文档模式误判为"文档缺失"**：跳转模式的 README 极简是设计选择，不应扣分为 RM-002/RM-004，应转而检视外部 usage-docs
+- **async/Promise 返回类型遗漏**：文档写 `getConfig(): Config` 但代码为 `getConfig(): Promise<Config>`，是最常见的签名不一致
+- **命名导出 vs 默认导出**：`export { lottie }` 是命名导出，示例必须用 `import { lottie }` 而非 `import lottie`
+- **CHANGELOG 未记录鸿蒙化变更**：CHANGELOG 存在但仅含原库版本历史，无鸿蒙化适配条目
+- **接口规格说明文档是权威基准**：交叉验证时直接使用，无需再从源码逐条提取
+
+---
+
+## 与前置/后置 SKILL 的衔接
+
+- **前置依赖**：`rn-library-interface-analyzer`（第1阶段）输出的 `接口规格说明.md` — **交叉验证的权威基准**
+- **前置依赖**：`rn-library-memory-leak-check`（第5阶段）输出的 `内存泄露检视报告.md`
+- **后置输入**：本 SKILL 输出的 `文档质量检视报告.md` 将作为 `rn-library-test-coverage-check`（第7阶段）的输入依赖
+- 确保报告中的问题清单包含足够的定位信息（文件路径+行号+检查项编号），便于后续 SKILL 参考和综合报告汇总
+
+---
+
+## 参考文件
+
+| 文件 | 用途 | 加载时机 |
+|------|------|----------|
+| [references/CHECK_CHECKLIST.md](references/CHECK_CHECKLIST.md) | 各维度详细检查项清单与编号 | Phase 2 检视时按需加载 |
+| [references/DOC_COLLECTION_GUIDE.md](references/DOC_COLLECTION_GUIDE.md) | 文档模式识别与收集完整流程 | Phase 1 文档收集时按需加载 |
+| [references/CROSS_VALIDATION_GUIDE.md](references/CROSS_VALIDATION_GUIDE.md) | 交叉验证完整流程与比对方法 | Phase 2.5 交叉验证时按需加载 |
+| [references/EXAMPLES.md](references/EXAMPLES.md) | 检视示例与常见场景 | 理解检视流程时按需加载 |
+| [references/GOTCHAS.md](references/GOTCHAS.md) | 完整常见陷阱列表 | 检视过程中按需加载 |
+| [assets/REPORT_TEMPLATE.md](assets/REPORT_TEMPLATE.md) | 报告模板与评分计算示例 | Phase 4 报告生成时按需加载 |
+| [assets/MODEL.md](assets/MODEL.md) | 中文文档模板规范 | 检视文档规范性时按需加载 |
+| [assets/MODEL_en.md](assets/MODEL_en.md) | 英文文档模板规范 | 检视英文文档规范性时按需加载 |

package/vendor/Server/Skills/rn-library-documentation-quality-check/assets/MODEL.md

@@ -0,0 +1,414 @@
+> 文档模板：v0.4.1，[文档规范](./文档规范.md)(删除)
+
+# <center>lottie-react-native</center>
+
+本项目基于 [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) 开发。
+
+该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/lottie-react-native` 版本所属关系如下：
+| 三方库名称    | 三方库版本    | 发布信息     | 支持RN版本    | Autolink     | 编译API版本     | 社区基线版本    | npm地址                |
+| ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- |
+| @react-native-ohos/lottie-react-native |  [~ 7.3.0](https://gitcode.com/CPF-RN/rntpc_lottie-react-native/tree/br_rnoh0.82)    | [Gitcode Releases](https://gitcode.com/openharmony-sig/rntpc_lottie-react-native/releases) | 0.82.* | 否 | API12+ | 7.3.4 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/lottie-react-native) |
+| @react-native-ohos/lottie-react-native  | [~ 7.2.3](https://gitcode.com/CPF-RN/rntpc_lottie-react-native/tree/br_rnoh0.77)     | [Gitcode Releases](https://gitcode.com/openharmony-sig/rntpc_lottie-react-native/releases) | 0.77.* | 否 | API12+ | 7.3.4 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/lottie-react-native) | 否 | API12+ | 7.2.2 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/lottie-react-native) |
+| @react-native-ohos/lottie-react-native  | [~ 6.4.2](https://gitcode.com/CPF-RN/rntpc_lottie-react-native/tree/br_rnoh0.72)    | [Gitcode Releases](https://gitcode.com/openharmony-sig/rntpc_lottie-react-native/releases) | 0.72.* | 否 | API12+ | 7.3.4 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/lottie-react-native) | 是 | API12+ | 6.4.1 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/lottie-react-native) |
+| @react-native-oh-tpl/lottie-react-native  | [<= 6.4.1-0.1.17@deprecated](https://github.com/react-native-oh-library/lottie-react-native/tree/sig) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/lottie-react-native/releases) | 0.72.* | 否 | API12+ | 7.3.4 | [Npm Address](https://www.npmjs.com/package/@react-native-ohos/lottie-react-native) | 否 | API12+ | 6.4.1 | [Npm Address](https://www.npmjs.com/package/@react-native-oh-tpl/lottie-react-native) |
+
+## 简介
+
+Lottie 组件用于 React Native。<br/>
+Lottie 是一个库生态系统，用于解析 Adobe After Effects 动画导出为 JSON 并带 bodymovin 原生渲染的动画！<br/>
+设计师首次可以在无需工程师手工繁琐重现的情况下，创造并交付精美的动画。
+
+## 下载安装
+
+进入到工程目录并输入以下命令：
+
+**npm**
+
+```bash
+npm install @react-native-ohos/lottie-react-native
+```
+
+**yarn**
+
+```bash
+yarn add @react-native-ohos/lottie-react-native
+```
+
+
+## Link
+
+|                                      | 是否支持autolink | RN框架版本 |
+|--------------------------------------|-----------------|------------|
+| ~ 7.3.0                               |  No              |  0.82     |
+| ~ 7.2.3                               |  No              |  0.77     |
+| ~ 6.4.2                               |  Yes             |  0.72     |
+| <= 6.4.1-0.1.17@deprecated            |  No              |  0.72     |
+
+使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md
+
+如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。
+<details>
+  <summary>ManualLink: 此步骤为手动配置原生依赖项的指导</summary>
+
+首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。
+
+### 1. Overrides RN SDK
+
+为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。
+
+关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides)
+
+```json
+{
+  "overrides": {
+    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm 在线版本
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
+    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
+  }
+}
+```
+
+### 2. 引入原生端代码
+
+目前有两种方法：
+
+- 通过 har 包引入；
+- 直接链接源码。
+
+方法一：通过 har 包引入（推荐）
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+    "@react-native-ohos/lottie-react-native": "file:../../node_modules/@react-native-ohos/lottie-react-native/harmony/lottie.har"
+  }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在命令行终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)
+
+### 3. 配置 CMakeLists 和引入 LottieAnimationViewPackage
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
+project(rnapp)
+cmake_minimum_required(VERSION 3.4.1)
+set(CMAKE_SKIP_BUILD_RPATH TRUE)
+set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
+set(LOG_VERBOSITY_LEVEL 1)
+set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
+set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
+set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
+add_compile_definitions(WITH_HITRACE_SYSTRACE)
+
+add_subdirectory("${RNOH_CPP_DIR}" ./rn)
+
+# RNOH_BEGIN: manual_package_linking_1
+add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
++ add_subdirectory("${OH_MODULES}/@react-native-ohos/lottie-react-native/src/main/cpp" ./lottie)
+# RNOH_END: manual_package_linking_1
+
+file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
+
+add_library(rnoh_app SHARED
+    ${GENERATED_CPP_FILES}
+    "./PackageProvider.cpp"
+    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
+)
+target_link_libraries(rnoh_app PUBLIC rnoh)
+
+# RNOH_BEGIN: manual_package_linking_2
+target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
++ target_link_libraries(rnoh_app PUBLIC rnoh_lottie)
+# RNOH_END: manual_package_linking_2
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "LottieAnimationViewPackage.h"
+
+using namespace rnoh;
+
+std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
+    return {
+      std::make_shared<SamplePackage>(ctx),
++     std::make_shared<LottieAnimationViewPackage>(ctx)
+    };
+}
+```
+
+### 4. 在 ArkTs 侧引入 Lottie 组件
+
+找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加：
+
+```diff
+  ...
++ import { LottieAnimationView, LOTTIE_TYPE } from "@react-native-ohos/lottie-react-native"
+
+@Builder
+export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
+  ...
++ if (ctx.componentName === LOTTIE_TYPE) {
++   LottieAnimationView({
++     ctx: ctx.rnComponentContext,
++     tag: ctx.tag
++   })
++ }
+ ...
+}
+```
+
+> [!TIP] 本库使用了混合方案，需要添加组件名。
+
+在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名
+
+```diff
+const arkTsComponentNames: Array<string> = [
+  SampleView.NAME,
+  GeneratedSampleView.NAME,
+  PropsDisplayer.NAME,
++ LOTTIE_TYPE
+  ];
+```
+
+### 5. 在 ArkTs 侧引入 LottieAnimationViewPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+> [!TIP] 版本 6.4.1-0.1.13 及以上需要
+
+```diff
+  ...
++ import {LottieAnimationViewPackage} from '@react-native-ohos/lottie-react-native/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+  return [
++    new LottieAnimationViewPackage(ctx)
+  ];
+}
+```
+</details>
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在命令行终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
+2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;
+3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
+4. RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;
+
+### 权限要求
+
+- 如果 source 使用网络 url 应用需要申请网络权限
+
+  在`entry/src/main/module.json5`中添加
+
+```json
+requestPermissions: [
+  {
+    name: "ohos.permission.INTERNET",
+  },
+],
+```
+
+- 如果使用的 json 文件里有依赖图片资源或使用 imageAssetsFolder 属性，需要将资源文件放置到 HarmonyOS 工程 rawfile 下对应的路径中
+
+rawfile 路径：`entry/src/main/resources/rawfile`
+  
+  
+ ## 使用示例
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```javascript
+import React from "react";
+import { View } from "react-native";
+import LottieView from "lottie-react-native";
+
+const App = () => {
+  return (
+    <View style={{ flex: 1 }}>
+      <LottieView 
+        style={{ width: 300, height: 300 }} 
+        source={require("./assets/xxx.json")}   
+        autoPlay 
+        loop />
+    </View>
+  );
+};
+
+export default App;
+```
+
+## 使用说明
+**动画设置**
+```javascript
+ <LottieView
+      source={require('./assets/animations/loading.json')} // JSON文件路径
+      style={{ width: 200, height: 200 }}
+      duration={6000}
+      resizeMode={'center'}
+      autoPlay        // 自动播放
+      loop            // 循环播放
+
+    />
+```
+
+**事件监听**
+```javascript
+<LottieView
+    style={{ width: 300, height: 300 }}
+    source={require("../assets/data_base64s.json")}
+    loop
+    onAnimationFinish={() => {
+        // 动画播放完成时调用
+    }}
+     onAnimationLoaded={() => {
+        // 加载完成时调用
+    }}
+     onAnimationFailure={(event)=>{
+       // 动画加载或播放失败时调用 
+    }}
+/>
+```
+
+**播放控制**
+```javascript
+ const animationRef = useRef<LottieView>(null);
+
+ <LottieView
+    ref={animationRef}
+    style={{ width: 300, height: 300 }}
+    source={require("../assets/data_base64s.json")}
+    loop={true} 
+/>
+
+// 重置动画
+animationRef.current.reset();
+// 播放动画
+animationRef.current.play();
+// 暂停动画
+animationRef.current.pause();
+// 恢复暂停的动画。
+animationRef.current.resume();
+```
+
+
+## 接口说明
+
+> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!TIP] "OpenHarmony Support"列为 yes 表示 OpenHarmony平台支持 该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+### 组件
+| 名称       | 参数类型     | 必填  | 平台  | OpenHarmony平台支持| 描述 |
+|------------|------------|----------------------|------|-----|----------------|
+| LottieView | [LottieViewProps](#LottieViewProps) | yes  | all | yes | LottieView组件 |
+
+### 属性
+LottieViewProps
+
+| 名称                           | 参数类型          | 默认值       | 必填            | 平台   | HarmonyOS平台支持    | 描述 |
+|------------------------------|--------------------|------------|---------------|------|------------------|---------------|
+| source                       | string             | AnimationObject | { uri: string } | None | Yes              | 必填 - 动画来源。可以通过字符串引用本地资源，或通过带有 uri 属性的对象引用远程资源，也可以是动画的实际 JS 对象（例如通过 require('../path/to/animation.json') 获取）|
+| progress                     | number             | 0          | No            | iOS, Android, Windows | Yes              | 0 到 1 之间的数字。该数字表示动画的标准进度。如果更新此属性，动画将相应更新到该进度值对应的帧。如果使用命令式 API，则不需要此属性。|
+| speed                        | number             | 1          | No            | All  | Yes              | 动画播放的速度。设置为负值将使动画倒放                        |
+| duration                     | number             | undefined  | No            | iOS, Android, Windows | Yes              | 动画的持续时间（毫秒）。设置后将优先于速度属性。此属性仅在 source 为动画的实际 JS 对象时有效。|
+| loop                         | boolean            | true       | No            | All  | Yes              | 布尔值，指示动画是否应循环播放。                                |
+| autoPlay                     | boolean            | false      | No            | All  | Yes              | 布尔值，指示组件挂载时是否自动开始播放动画。这仅影响命令式 API。     |
+| resizeMode                   | 'cover'/ 'contain' /'center' | contain | No            | iOS, Android, Windows | Yes              | 确定当动画帧与原始图像尺寸不匹配时如何调整动画视图的大小。支持 cover、contain 和 center。|
+| style                        | StyleProp<ViewStyle> | None       | No            | iOS, Android, Windows | Yes              | 视图的样式属性，与标准 View 组件期望的样式相同，不包括边框样式     |
+| containerStyle<sup>7.3.0+</sup> | StyleProp<ViewStyle> | None       | No            | iOS, Android, VisionOS | Yes              | 最外层容器视图的样式属性，与标准 View 组件期望的样式相同。用于布局和定位。 |
+| webStyle                     | CSSProperties      | None       | No            | Web  | No               | 视图的样式属性，使用 CSSProperties。 |
+| imageAssetsFolder            | string             | None       | No            | Android | Yes              | Android 和 HarmonyOS 正确处理资源所需，iOS 将忽略此属性。   |
+| useNativeLooping             | boolean            | false      | No            | Windows | No               | 仅适用于 Windows。启用后，使用平台级循环以提高流畅度，但 onAnimationLoop 不会触发，且更改 loop 属性将重置播放而不是正常结束。|
+| onAnimationLoop              | callback           | None       | No            | Windows, Web | No               | 仅适用于 Windows 和 Web。动画循环播放时调用的回调函数。|
+| onAnimationFinish            | callback           | None       | No            | All  | Yes              | 动画完成时调用的回调函数。此回调带有一个布尔值 isCancelled 参数，指示动画是实际完成播放，还是被取消（例如在播放时调用了 play() 或 reset()）。注意：仅在 loop 设置为 false 时才会调用此回调。|
+| onAnimationFailure           | callback           | None       | No            | All  | Yes              | 处理动画（加载、运行等）过程中发生错误时调用的回调函数。此回调带有一个字符串 error 参数，其中包含发生的错误信息。|
+| onAnimationLoaded            | callback           | None       | No            | All  | Yes              | 动画加载完成时调用的回调函数。此回调不带参数。 |
+| renderMode                   | 'AUTOMATIC'        | 'HARDWARE' | 'SOFTWARE'    | AUTOMATIC | No               | iOS, Android | No   | 字符串标志，用于设置使用 HARDWARE（硬件）还是 SOFTWARE（软件）加速渲染 |
+| cacheComposition             | boolean            | true       | No            | Android | Yes              | 仅适用于 Android 和 HarmonyOS，布尔值指示是否应对动画进行缓存。 |
+| colorFilters                 | Array<ColorFilter> | []         | No            | iOS, Android, Windows | Yes              | 对象数组，表示通过 KeyPath 指定的图层以及新的颜色滤镜值（十六进制字符串）。  |
+| textFiltersAndroid           | Array<TextFilterAndroid> | []         | No            | Android | No               | 仅适用于 Android，表示要查找和替换的文本值的对象数组。 |
+| textFiltersIOS               | Array<TextFilterIOS> | []         | No            | iOS  | No               | 仅适用于 iOS，表示通过 KeyPath 指定的文本图层以及新的字符串值的对象数组。 |
+| hover                        | boolean            | false      | No            | Web  | No               | 仅适用于 Web，布尔值表示鼠标悬停时是否播放。 |
+| direction                    | 1                  | -1         | 1             | No   | Web              | No | 仅适用于 Web，数值 1 或 -1 表示播放方向。 |
+
+### API
+| 名称     | 类型     | 参数类型 | 返回值 | 必填    | 平台 | OpenHarmony平台支持 | 描述  |
+|--------|---------|-----|-------|-------|--------|-----|-----------------|
+| play   | function | /  | /   | No     | All | Yes   | 按指定的属性速度完整播放动画。也可以在调用 play(startFrame, endFrame) 时播放动画的一个部分（网页上不可用）。 |
+| reset  | function | /  | /   | No     | All | Yes   | 将动画重置回 0 进度。 |
+| pause  | function | /  | /   | No     | All | Yes   | 暂停动画。      |
+| resume | function | /  | /   | No     | All | Yes   | 恢复暂停的动画。   |
+
+## 遗留问题
+
+- 原库部分接口在 HarmonyOS 中没有对应属性及接口处理相关逻辑，问题: [issue#18](https://github.com/react-native-oh-library/lottie-react-native/issues/18)
+
+## 其他
+无
+  
+## 目录结构
+````
+/rntpc_lottie-react-native  # 项目根目录
+├── harmony              # 鸿蒙适配代码
+│    └─ lottie.har          # har包
+│    └─ lottie                  # 鸿蒙适配核心代码
+│          └─ index.ets    # 鸿蒙适配代码入口    
+│          └─ src/main/ets  
+│              └─ LottieAnimationView  # lottieView组件   。基于ohos/lottie库封装的lottieView组件   
+├── src                  # RN代码
+│    └─ index.tsx  # 入口文件 
+│    └─ LottieAnimationViewNativeComponent.ts 类型文件
+│    └─ codegenUtils.ts # 类型文件          
+├── README.md           # 英文安装使用方法    
+├── README_zh.md   # 中文安装使用方法                    
+````
+  
+## 贡献代码
+
+使用过程中发现任何问题都可以提交 [Issue](https://gitcode.com/openharmony-sig/rntpc_lottie-react-native/issues)，当然，也非常欢迎提交 [PR](https://gitcode.com/openharmony-sig/rntpc_lottie-react-native/pulls) 。
+  
+## 开源协议
+
+本项目基于 [Apache License 2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE) ，请自由地享受和参与开源。