Star33
21
代码
代码
Issues
Pull Requests1
项目讨论
Wiki
分析
Star33
21
已合并
docs: improve OpenHarmony documentation accuracy #42
sunkaiyang创建于 9月5日
docs: improve OpenHarmony documentation accuracy #42
已合并
sunkaiyang创建于 9月5日
从sky603629/rntpc_react-native-view-shot77doc合入到CPF-RN/rntpc_react-native-view-shotbr_rnoh0.77
共 3 个文件变更+160-173
MREADME.md+75-83
@@ -8,7 +8,7 @@
8 8 
9该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-view-shot。 版本所属关系如下：9该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-view-shot。 版本所属关系如下：
10 10 
11-| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 |11+| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 |
12| ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- |12| ------------ | ------------ | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- |
13| @react-native-ohos/react-native-view-shot | [~3.9.0](https://www.npmjs.com/package/@react-native-ohos/react-native-view-shot) | [Gitcode Releases](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/releases) | 0.77.* | 否 | API12+ | 3.8.0 | [br_rnoh0.77](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/tree/br_rnoh0.77) | 13| @react-native-ohos/react-native-view-shot | [~3.9.0](https://www.npmjs.com/package/@react-native-ohos/react-native-view-shot) | [Gitcode Releases](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/releases) | 0.77.* | 否 | API12+ | 3.8.0 | [br_rnoh0.77](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/tree/br_rnoh0.77) |
14 14 
@@ -39,25 +39,29 @@ yarn add @react-native-ohos/react-native-view-shot
39 39 
40## Link40## Link
41 41 
42- | | 是否支持autolink | RN框架版本 |42+| | 是否支持autolink | RN框架版本 |
43- |--------------------------------------|-----------------|------------|43+|--------------------------------------|-----------------|------------|
44- | ~3.9.0 | 否 | 0.77.* |44+| ~3.9.0 | 否 | 0.77.* |
45+ 
46+ManualLink: 此步骤为手动配置原生依赖项的指导
45 47 
46首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。48首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。
47 49 
48-### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段50+### 1. Overrides RN SDK
cpf-manager
cpf-managercpf-manager27 天前

【AI-Review】【一般】【基础代码问题】【可读性问题】中文文档步骤标题语言不一致

● 问题：README.md 第 50 行 ### 1. Overrides RN SDK 在中文文档中使用英文标题。本次 PR 将原中文标题 ### 1.在工程根目录的 oh-package.json5 添加 overrides 字段 改为英文 ### 1. Overrides RN SDK，但同文档中其他步骤标题仍为中文：第 64 行 ### 2. 引入原生端代码、第 98 行 ### 3. 配置 CMakeLists 和引入 ViewShotPackage、第 146 行 ### 4. 在 ArkTs 侧引入 ViewShotPackage。步骤 1 标题语言与步骤 2/3/4 不一致。

● 影响：一般。中文文档中混用英文小节标题破坏文档一致性，影响阅读体验；中文读者在浏览 ManualLink 步骤列表时需要在中英文标题之间切换，降低文档可读性。

● 建议：将第 50 行标题改为中文，与步骤 2/3/4 保持一致，例如：### 1. 配置 RN SDK 版本统一（overrides） 或保留原中文标题 ### 1. 在工程根目录的 oh-package.json5 添加 overrides 字段。

likedislike
sunkaiyang
sunkaiyang
27 天前 评论：
51+ 
52+为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。
49 53 
50```json54```json
51{55{
52 "overrides": {56 "overrides": {
53- "@rnoh/react-native-openharmony": "^0.77.33" // ohpm online version57+ "@rnoh/react-native-openharmony": "~0.77.33" // ohpm online version
54 // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // path to local har package58 // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // path to local har package
55 // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // path to source code59 // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // path to source code
56 }60 }
57}61}
58```62```
59 63 
60-### 引入原生端代码64+### 2. 引入原生端代码
61 65 
62目前有两种方法：66目前有两种方法：
63 67 
@@ -91,7 +95,7 @@ ohpm install
91 95 
92> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/link-source-code.md)96> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/link-source-code.md)
93 97 
94-### 配置 CMakeLists 和引入 ViewShotPackage98+### 3. 配置 CMakeLists 和引入 ViewShotPackage
95 99 
96打开 `entry/src/main/cpp/CMakeLists.txt`，添加：100打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
97 101 
@@ -139,9 +143,9 @@ std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Cont
139}143}
140```144```
141 145 
142-### 在 ArkTs 侧引入 ViewShotPackage146+### 4. 在 ArkTs 侧引入 ViewShotPackage
143 147 
144-打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：148+打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加：
145 149 
146```diff150```diff
147 ...151 ...
@@ -176,7 +180,15 @@ ohpm install
176 本文档内容基于以下环境验证通过： 180 本文档内容基于以下环境验证通过：
177 181
178 1. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;182 1. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
179- 183+ 
184+### 权限要求
185+ 
186+无需额外权限。
187+ 
188+### 编译运行API要求
189+ 
190+API 12 及以上。
191+ 
180## 使用示例192## 使用示例
181 193 
182下面的代码展示了这个库的基本使用场景：194下面的代码展示了这个库的基本使用场景：
@@ -189,7 +201,7 @@ import { View, Text, Button } from "react-native";
189import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";201import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";
190 202 
191export function ViewShotDemo() {203export function ViewShotDemo() {
192- const view = React.useRef < View > (null);204+ const view = React.useRef(null);
193 const ref = React.useRef(null);205 const ref = React.useRef(null);
194 const onCapture = (res) => {206 const onCapture = (res) => {
195 console.info("onCapture callback");207 console.info("onCapture callback");
@@ -235,8 +247,8 @@ export function ViewShotDemo() {
235 <Button247 <Button
236 title="ViewShot capture"248 title="ViewShot capture"
237 onPress={() => {249 onPress={() => {
238- captureRef(ref).then((res) => {250+ ref.current?.capture().then((res) => {
239- console.info(`captureRef: ${res}`);251+ console.info(`ViewShot.capture: ${res}`);
240 });252 });
241 }}253 }}
242 />254 />
@@ -260,25 +272,28 @@ export function ViewShotDemo() {
260 272 
261> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。273> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
262 274 
263-| Name | Description | Type | Required | Platform | HarmonyOS Support |275+| 名称 | 参数类型 | 默认值 | 必填 | 平台 | HarmonyOS平台支持 | 描述 |
264-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------- | ------------ | ----------------- |276+| ---- | -------- | ------ | ---- | ---- | ----------------- | ---- |
265-| captureMode | 未定义时（默认），截图不会自动进行，需要使用 ref 并手动调用 `capture()`。<br>`"mount"`：在组件挂载时自动截图一次。（需注意图片加载不会被等待，如需等待图片加载完成，建议使用 `"none"` 并在 Image#onLoad 后调用 viewShotRef.capture()。）<br>`"continuous"` 实验性功能，会持续不断地截图。仅适用于非常特殊的场景。<br> `"update"` 实验性功能，每次 React 重绘（on did update）时都会截图。仅适用于非常特殊的场景。 | ( 'mount' \| 'continuous' \| 'update') | no | Android, iOS | yes |277+| captureMode | `"mount"` \| `"continuous"` \| `"update"` | `undefined` | No | Android, iOS | Yes | 未定义时截图不会自动进行，需要使用 ref 并手动调用 `capture()`。<br>`"mount"`：组件挂载时自动截图一次；HarmonyOS 会在组件挂载后延迟约 100 ms 执行截图。图片加载不会被等待，如需等待图片加载完成，请不要设置 `captureMode`，并在 `Image#onLoad` 后调用组件 ref 的 `current.capture()`。<br>`"continuous"`：实验性功能，会持续不断地截图，仅适用于非常特殊的场景。<br>`"update"`：实验性功能，每次 React 重绘时截图，仅适用于非常特殊的场景。 |
266-| onCapture | 当定义了 `captureMode` 时，截图成功后会调用此回调函数，并传入截图结果。 | function | no | Android, iOS | yes |278+| onCapture | `(uri: string) => void` | None | No | Android, iOS | Yes | 定义 `captureMode` 时，截图成功后调用并传入截图结果。 |
267-| onCaptureFailure | 当定义了 `captureMode` 时，截图失败时会调用此回调函数。 | function | no | Android, iOS | yes |279+| onCaptureFailure | `(error: Error) => void` | None | No | Android, iOS | Yes | 定义 `captureMode` 时，截图失败后调用并传入错误对象。 |
268-| options | 截图配置项。 | object | no | Android, iOS | partially |280+| options | `CaptureOptions` | None | No | Android, iOS | Partially | 截图配置项。 |
269-| children | 实际需要被栅格化（截图）的内容。 | ReactNode | no | Android, iOS | yes |281+| children | `ReactNode` | None | No | Android, iOS | Yes | 实际需要被栅格化（截图）的内容。 |
282+| onLayout | `(event: LayoutChangeEvent) => void` | None | No | Android, iOS | Yes | 组件挂载或布局变化时调用，并接收布局事件。 |
283+| style | `StyleProp&lt;ViewStyle&gt;` | None | No | Android, iOS | Yes | 应用于 ViewShot 容器的视图样式。 |
270 284 
271-#### options属性详情285+### options属性详情
272 286 
273-| Name | Description | Type | Required | Platform | HarmonyOS Support |287+| 名称 | 参数类型 | 默认值 | 必填 | 平台 | HarmonyOS平台支持 | 描述 |
274-| ------------------------ | ------------------------------------------------------------ | ------------------------------------ | -------- | ------------ | ----------------- |288+| ---- | -------- | ------ | ---- | ---- | ----------------- | ---- |
275-| fileName | 文件名，长度必须至少为 3 个字符。 | string | no | Android, iOS | yes |289+| fileName | `string` | None | No | Android | Yes | 文件名，长度必须至少为 3 个字符。 |
276-| width / height | 最终图片的宽度和高度（会根据 View 的边界进行缩放。如果需要保持原始像素大小，请勿提供此参数）。 | number | no | Android, iOS | yes |290+| width / height | `number` | None | No | Android, iOS | Yes | 最终图片的宽度和高度（会根据 View 的边界进行缩放。如果需要保持原始像素大小，请勿提供此参数）。 |
277-| quality | 图片质量，范围为 0.0 - 1.0（默认值）。（仅适用于有损压缩格式，如 jpg） | number | no | Android, iOS | yes |291+| quality | `number` | `1` | No | Android, iOS | Yes | 图片质量，范围为 0.0 - 1.0。（仅适用于 jpg 等有损压缩格式。） |
278-| format | 图片格式，可选 png 或 jpg，默认为 png。 | string | no | Android, iOS | yes |292+| format | `"jpg"` \| `"png"` \| `"webm"` \| `"raw"` | `"png"` | No | Android, iOS | Partially | 图片格式，可选 png、jpg、webm 或 raw，默认为 png。HarmonyOS 仅支持 png 和 jpg；webm 和 raw 仅 Android 支持。 |
279-| result | 保存截图的方式，可选值如下：<br/>"tmpfile"（默认）：保存到临时文件（仅在应用运行期间有效）。<br/>"base64"：编码为 base64 并返回原始字符串。建议仅用于小图片，因为可能会导致卡顿（字符串会通过桥接传输）。注意：这不是 data uri，如需 data uri 请使用 data-uri。<br/>"data-uri"：与 base64 相同，但会包含 Data URI scheme 请求头。 <br/>'sandbox-file'（仅 OpenHarmony 支持）：保存到临时文件（仅在应用运行期间有效）。| ( 'tmpfile' \|'base64' \|'data-uri' \|'sandbox-file') | no | Android, iOS | yes |293+| result | `"tmpfile"` \| `"base64"` \| `"data-uri"` \| `"zip-base64"` | `"tmpfile"` | No | Android, iOS | Partially | 保存截图的方式，可选值如下：<br/>`"tmpfile"`（默认）：保存到应用临时目录并返回文件路径，仅在应用运行期间有效。<br/>`"base64"`：编码为 base64 并返回原始字符串。建议仅用于小图片，因为字符串传输可能导致卡顿。注意：这不是 data URI，如需 data URI 请使用 `data-uri`。<br/>`"data-uri"`：与 base64 相同，但包含 Data URI scheme 请求头。<br/>`"zip-base64"`：使用 Zip/Deflate 算法压缩数据，再转换为 base64。HarmonyOS 不支持 zip-base64（仅 Android 支持）。 |
280-| snapshotContentContainer | 如果为 true 且 view 为 ScrollView，则会使用 "content container" 的高度，而非容器本身的高度。 | boolean | no | Android, iOS | no |294+| snapshotContentContainer | `boolean` | `false` | No | Android, iOS | No | 如果为 true 且 view 为 ScrollView，则会使用 "content container" 的高度，而非容器本身的高度。 |
281-| useRenderInContext | 修改 iOS 截图策略，使用 renderInContext 方法替代 drawViewHierarchyInRect，可能适用于某些特定场景。 | boolean | no | Android, iOS | no |295+| useRenderInContext | `boolean` | None | No | iOS | No | 修改 iOS 截图策略，使用 renderInContext 方法替代 drawViewHierarchyInRect，可能适用于某些特定场景。 |
296+| handleGLSurfaceViewOnAndroid | `boolean` | `false` | No | Android | No | 如果设置为 true，且视图是 SurfaceView 或视图树中包含 SurfaceView，则捕获其内容。 |
282 297 
283## API298## API
284 299 
@@ -286,11 +301,12 @@ export function ViewShotDemo() {
286 301 
287> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。302> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
288 303 
289-| Name | Description | Type | Required | Platform | HarmonyOS Support |304+| 名称 | 类型 | 参数类型 | 返回值 | 必填 | 平台 | HarmonyOS平台支持 | 描述 |
290-| ---------------- | ----------- | -------- | -------- | ------------ | ----------------- |305+| --- | --- | --- | --- | --- | --- | --- | --- |
291-| `captureRef` | 组件截图 | function | no | Android, iOS | yes |306+| `captureRef` | function | `view: number \| ReactInstance \| RefObject&lt;T&gt;; optionsObject?: CaptureOptions` | `Promise&lt;string&gt;` | `view`: yes; `optionsObject`: no | Android, iOS | yes | 捕获指定组件并返回截图结果。 |
292-| `captureScreen` | 屏幕截图 | function | no | Android, iOS | yes |307+| `captureScreen` | function | `optionsObject?: CaptureOptions` | `Promise&lt;string&gt;` | no | Android, iOS | yes | 捕获当前屏幕并返回截图结果。 |
293-| `releaseCapture` | 资源释放 | function | no | Android, iOS | yes |308+| `releaseCapture` | function | `uri: string` | `void` | yes | Android, iOS | yes | 释放截图产生的临时文件。 |
309+| `ViewShot.capture()` | function | / | `Promise&lt;string&gt;` | / | Android, iOS | yes | ViewShot 组件实例的命令式截图方法，通过组件 ref 的 `current.capture()` 调用，并使用组件 `options` 属性中的截图配置；未设置 `captureMode` 时可用它手动触发截图。 |
294 310 
295## 遗留问题311## 遗留问题
296- [ ] 被截图组件需要设置背景色，否则截图效果全黑 [issues#3](https://github.com/react-native-oh-library/react-native-view-shot/issues/3)。312- [ ] 被截图组件需要设置背景色，否则截图效果全黑 [issues#3](https://github.com/react-native-oh-library/react-native-view-shot/issues/3)。
@@ -300,52 +316,28 @@ export function ViewShotDemo() {
300无316无
301 317 
302## 目录结构318## 目录结构
303-````319+````text
304-/rntpc_react-native-view-shot # 项目根目录320+rntpc_react-native-view-shot/
305-│ LICENSE321+├─src
306-│ OAT.xml322+│ │ index.js # JavaScript 入口和 ViewShot 组件
307-│ package.json323+│ │ index.d.ts # TypeScript 类型声明
308-│ README.md324+│ │ NativeModule.js # 原生模块入口
309-│ README.OpenSource325+│ └─ NativeViewShot.js # TurboModule 规格
310-│ README_en.md326+└─harmony
311-│327+ └─view_shot # HarmonyOS 适配核心代码
312-├─example328+ │ Index.ets # HAR 模块入口
313-│329+ │ ts.ts # ArkTS 导出入口
314-├─harmony330+ └─src
315-│ │ view_shot.har # 编译后的 HAR 包（HarmonyOS Archive）331+ └─main
316-│ │332+ ├─cpp # C++ TurboModule 注册与绑定
317-│ └─view_shot # 鸿蒙适配核心代码333+ │ │ CMakeLists.txt
318-│ │ .gitignore334+ │ │ ViewShotPackage.h
319-│ │ build-profile.json5335+ │ │ ViewShotTurboModule.cpp
320-│ │ hvigorfile.ts336+ │ └─ ViewShotTurboModule.h
321-│ │ Index.ets337+ └─ets # ArkTS 业务实现
322-│ │ oh-package.json5338+ │ Logger.ts
323-│ │ ts.ets339+ │ ViewShotPackage.ts
324-│ │340+ └─ ViewShotTurboModule.ts
325-│ └─src
326-│ └─main
327-│ │ module.json5
328-│ │
329-│ ├─cpp # C++ 原生层（新架构 Fabric/TurboModule）
330-│ │ CMakeLists.txt
331-│ │ ViewShotPackage.h
332-│ │ ViewShotTurboModule.cpp
333-│ │ ViewShotTurboModule.h
334-│ │
335-│ ├─ets # ArkTS 业务层
336-│ │ Logger.ts
337-│ │ ViewShotPackage.ets
338-│ │ ViewShotTurboModule.ets
339-│ │
340-│ └─resources # 资源文件
341-│
342-└─src
343- │ index.tsx
344- │ RNViewShot.ts
345- │ RNViewShot.web.ts
346- │
347- └─specs
348- NativeRNViewShot.ts
349````341````
350 342
351## 贡献代码343## 贡献代码
@@ -355,4 +347,4 @@ export function ViewShotDemo() {
355 347 
356## 开源协议348## 开源协议
357 349 
358-本项目基于 [The MIT License (MIT)](https://github.com/gre/react-native-view-shot/blob/master/LICENSE) ，请自由地享受和参与开源。350+本项目基于 [The MIT License (MIT)](https://github.com/gre/react-native-view-shot/blob/master/LICENSE)，请自由地享受和参与开源。
MREADME_en.md+77-86
@@ -1,4 +1,4 @@
1-> Template version: v0.4.21+> Document Template: v0.4.2
2 2 
3<p align="center">3<p align="center">
4 <h1 align="center"> <code>react-native-view-shot</code> </h1>4 <h1 align="center"> <code>react-native-view-shot</code> </h1>
@@ -8,7 +8,7 @@ This project is based on [react-native-view-shot](https://github.com/gre/react-n
8 8 
9This third-party library has been migrated to Gitcode and is now available for direct download from npm, the new package name is:`@react-native-ohos/react-native-view-shot`. The version correspondence details are as follows:9This third-party library has been migrated to Gitcode and is now available for direct download from npm, the new package name is:`@react-native-ohos/react-native-view-shot`. The version correspondence details are as follows:
10 10 
11-| Name | Version (npm address) | Release Information | Supported RN Version | Supported Autolink | Compile API Version | Community Baseline Version | Source |11+| Name | Version(Npm Address) | Release Information | Supported RN Version | Supported Autolink | Compile API Version | Community Baseline Version | Source code address |
cpf-manager
cpf-managercpf-manager27 天前

【AI-Review】【一般】【基础代码问题】【可读性问题】英文文档表头 npm 大小写与文档内不一致

● 问题：README_en.md 第 11 行表格表头 Version(Npm Address) 将 npm 包管理器名称写为 Npm（首字母大写）。npm 的官方拼写为全小写 npm（或作为缩写全大写 NPM），Npm 非标准写法。同文档第 29 行安装命令 npm install @react-native-ohos/react-native-view-shot 使用的是小写 npm，表头此处与文档内其他位置大小写不一致。同时 Version 与 ( 之间缺少空格，基线版本为 Version (npm address)（有空格）。对比中文版 README.md 第 11 行 三方库版本（npm地址）（正确小写），此处为 PR 新引入的拼写与格式回归。

● 影响：一般。Npm 非标准拼写，破坏文档内部一致性，影响专业性；拼写检查工具可能对 Npm 告警。

● 建议：将 Version(Npm Address) 改为 Version (npm address)，与同文档安装命令及中文版保持一致。

likedislike
sunkaiyang
sunkaiyang
27 天前 评论：
12| --------------| -------------- | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- |12| --------------| -------------- | ------------------------------ | ------------- | ------------- |------------------------ | ------------- | ------------- |
13| @react-native-ohos/react-native-view-shot | [~3.9.0](https://www.npmjs.com/package/@react-native-ohos/react-native-view-shot) | [Gitcode Releases](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/releases) | 0.77.* | No | API12+ | 3.8.0 | [br_rnoh0.77](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/tree/br_rnoh0.77) | 13| @react-native-ohos/react-native-view-shot | [~3.9.0](https://www.npmjs.com/package/@react-native-ohos/react-native-view-shot) | [Gitcode Releases](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/releases) | 0.77.* | No | API12+ | 3.8.0 | [br_rnoh0.77](https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/tree/br_rnoh0.77) |
14 14 
@@ -16,7 +16,7 @@ This third-party library has been migrated to Gitcode and is now available for d
16 16 
17Snapshot a React Native view and save it to an image.17Snapshot a React Native view and save it to an image.
18 18 
19-## Installation and Usage 19+## Installation
20 20
21Go to the project directory and execute the following instruction:21Go to the project directory and execute the following instruction:
22 22 
@@ -40,25 +40,29 @@ yarn add @react-native-ohos/react-native-view-shot
40 40 
41## Link41## Link
42 42 
43-| | Is supported autolink | Supported RN Version |43+| | Supported Autolink | Supported RN Version |
44-| ------ | --------------------- | -------------------- |44+|--------------------------------------|--------------------|----------------------|
45-| ~3.9.0 | No | 0.77.* |45+| ~3.9.0 | No | 0.77.* |
46+ 
47+ManualLink: This step provides guidance for manually configuring native dependencies.
46 48 
47First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory.49First, use DevEco Studio to open the HarmonyOS project `harmony` in the project directory.
48 50 
49-### Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project51+### 1. Overrides RN SDK
52+ 
53+To ensure that the project uses a single RN SDK version, add the overrides field to the project-level `oh-package.json5` and point it to the required RN SDK version.
50 54 
51```json55```json
52{56{
53 "overrides": {57 "overrides": {
54- "@rnoh/react-native-openharmony": "^0.77.33" // ohpm online version58+ "@rnoh/react-native-openharmony": "~0.77.33" // ohpm online version
55 // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // path to local har package59 // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // path to local har package
56 // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // path to source code60 // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // path to source code
57 }61 }
58}62}
59```63```
60 64 
61-### Introducing Native Code65+### 2. Introducing Native Code
62 66 
63Currently, two methods are available:67Currently, two methods are available:
64 68 
@@ -89,7 +93,7 @@ Method 2: Directly link to the source code.
89 93 
90> [!TIP] For details, see [Directly Linking Source Code](https://gitcode.com/CPF-RN/usage-docs/blob/master/en/link-source-code.md).94> [!TIP] For details, see [Directly Linking Source Code](https://gitcode.com/CPF-RN/usage-docs/blob/master/en/link-source-code.md).
91 95 
92-### Configuring CMakeLists and Introducing ViewShotPackage96+### 3. Configuring CMakeLists and Introducing ViewShotPackage
93 97 
94Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:98Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
95 99 
@@ -137,9 +141,9 @@ std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Cont
137}141}
138```142```
139 143 
140-### Introducing ViewShotPackage to ArkTS144+### 4. Introducing ViewShotPackage to ArkTS
141 145 
142-Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:146+Open the `entry/src/main/ets/RNPackagesFactory.ets` file and add the following code:
143 147 
144```diff148```diff
145 ...149 ...
@@ -175,6 +179,13 @@ The content in this document has been verified under the following environment:
175 179 
1761. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;1801. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
177 181 
182+### Permission Requirements
183+ 
184+No additional permissions are required.
185+ 
186+### API requirements
187+ 
188+API 12 or later.
178 189 
179## Example190## Example
180 191 
@@ -188,7 +199,7 @@ import { View, Text, Button } from "react-native";
188import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";199import ViewShot, { captureRef, captureScreen } from "react-native-view-shot";
189 200 
190export function ViewShotDemo() {201export function ViewShotDemo() {
191- const view = React.useRef < View > (null);202+ const view = React.useRef(null);
192 const ref = React.useRef(null);203 const ref = React.useRef(null);
193 const onCapture = (res) => {204 const onCapture = (res) => {
194 console.info("onCapture callback");205 console.info("onCapture callback");
@@ -234,8 +245,8 @@ export function ViewShotDemo() {
234 <Button245 <Button
235 title="ViewShot capture"246 title="ViewShot capture"
236 onPress={() => {247 onPress={() => {
237- captureRef(ref).then((res) => {248+ ref.current?.capture().then((res) => {
238- console.info(`captureRef: ${res}`);249+ console.info(`ViewShot.capture: ${res}`);
239 });250 });
240 }}251 }}
241 />252 />
@@ -259,25 +270,28 @@ export function ViewShotDemo() {
259 270 
260> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.271> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
261 272 
262-| Name | Description | Type | Required | Platform | HarmonyOS Support |273+| Name | Parameter Type | Default Value | Required | Platform | OpenHarmony Platform Support | Description |
263-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------- | ------------ | ----------------- |274+| ---- | -------------- | ------------- | -------- | -------- | ---------------------------- | ----------- |
264-| captureMode | if not defined (default). the capture is not automatic and you need to use the ref and call `capture()` yourself<br>`"mount"`. Capture the view once at mount. (It is important to understand image loading won't be waited, in such case you want to use "none" with viewShotRef.capture() after Image#onLoad.) <br>`"continuous"` EXPERIMENTAL, this will capture A LOT of images continuously. For very specific use-cases.<br> `"update"` EXPERIMENTAL, this will capture images each time React redraw (on did update). For very specific use-cases. | ( 'mount' \| 'continuous' \| 'update') | no | Android, iOS | yes |275+| captureMode | `"mount"` \| `"continuous"` \| `"update"` | `undefined` | No | Android, iOS | Yes | When undefined, captures are not triggered automatically; use a ref and call `capture()` manually.<br>`"mount"`: captures once after mounting. On HarmonyOS, capture is performed approximately 100 ms after the component mounts. Image loading is not awaited; to wait for an image, leave `captureMode` undefined and call the component ref's `current.capture()` from `Image#onLoad`.<br>`"continuous"`: captures continuously and is intended only for specific scenarios.<br>`"update"`: captures after each React redraw and is intended only for specific scenarios. |
265-| onCapture | when a `captureMode` is defined, this callback will be called with the capture result. | function | no | Android, iOS | yes |276+| onCapture | `(uri: string) => void` | None | No | Android, iOS | Yes | Called with the capture result when `captureMode` is defined and a capture succeeds. |
266-| onCaptureFailure | when a `captureMode` is defined, this callback will be called when a capture fails. | function | no | Android, iOS | yes |277+| onCaptureFailure | `(error: Error) => void` | None | No | Android, iOS | Yes | Called with the error object when `captureMode` is defined and a capture fails. |
267-| options | view shot configuration. | object | no | Android, iOS | partially |278+| options | `CaptureOptions` | None | No | Android, iOS | Partially | View capture configuration. |
268-| children | the actual content to rasterize. | ReactNode | no | Android, iOS | yes |279+| children | `ReactNode` | None | No | Android, iOS | Yes | The content to rasterize. |
280+| onLayout | `(event: LayoutChangeEvent) => void` | None | No | Android, iOS | Yes | Invoked when the component mounts or its layout changes, with the layout event. |
281+| style | `StyleProp&lt;ViewStyle&gt;` | None | No | Android, iOS | Yes | View styles applied to the ViewShot container. |
269 282 
270-#### options283+### options
271 284 
272-| Name | Description | Type | Required | Platform | HarmonyOS Support |285+| Name | Parameter Type | Default Value | Required | Platform | OpenHarmony Platform Support | Description |
273-| ------------------------ | ------------------------------------------------------------ | ------------------------------------ | -------- | ------------ | ----------------- |286+| ---- | -------------- | ------------- | -------- | -------- | ---------------------------- | ----------- |
274-| fileName | the file name of the file. Must be at least 3 characters long. | string | no | Android, iOS | yes |287+| fileName | `string` | None | No | Android | Yes | The file name. It must be at least three characters long. |
275-| width / height | the width and height of the final image (resized from the View bound. don't provide it if you want the original pixel size). | number | no | Android, iOS | yes |288+| width / height | `number` | None | No | Android, iOS | Yes | The width and height of the final image, resized from the View bounds. Omit these options to retain the original pixel size. |
276-| quality | the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpg) | number | no | Android, iOS | yes |289+| quality | `number` | `1` | No | Android, iOS | Yes | Image quality from 0.0 to 1.0. This applies only to lossy formats such as jpg. |
277-| format | either png or jpg. Defaults to png. | string | no | Android, iOS | yes |290+| format | `"jpg"` \| `"png"` \| `"webm"` \| `"raw"` | `"png"` | No | Android, iOS | Partially | The image format. OpenHarmony supports only png and jpg; webm and raw are Android-only. |
278-| result | the method you want to use to save the snapshot, one of:<br/>"tmpfile" (default): save to a temporary file (that will only exist for as long as the app is running).<br/>"base64": encode as base64 and returns the raw string. Use only with small images as this may result of lags (the string is sent over the bridge). N.B. This is not a data uri, use data-uri instead.<br/>"data-uri": same as base64 but also includes the Data URI scheme header. <br/>'sandbox-file'(OpenHarmony only): save to a temporary file (that will only exist for as long as the app is running).| ( 'tmpfile' \|'base64' \|'data-uri' \|'sandbox-file') | no | Android, iOS | yes |291+| result | `"tmpfile"` \| `"base64"` \| `"data-uri"` \| `"zip-base64"` | `"tmpfile"` | No | Android, iOS | Partially | The output method for the snapshot:<br/>`"tmpfile"` (default): saves the image in the application temporary directory and returns its file path; the file exists only while the application is running.<br/>`"base64"`: encodes the image as base64 and returns the raw string. Use it only for small images because transferring the string may cause lag. This is not a data URI; use `data-uri` when a data URI is required.<br/>`"data-uri"`: same as base64, but includes the Data URI scheme header.<br/>`"zip-base64"`: compresses the data with Zip/Deflate and converts it to base64. OpenHarmony does not support zip-base64; it is Android-only. |
279-| snapshotContentContainer | if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height. | boolean | no | Android, iOS | no |292+| snapshotContentContainer | `boolean` | `false` | No | Android, iOS | No | When true and the view is a ScrollView, the content-container height is used instead of the container height. |
280-| useRenderInContext | change the iOS snapshot strategy to use method renderInContext instead of drawViewHierarchyInRect which may help for some use cases. | boolean | no | Android, iOS | no |293+| useRenderInContext | `boolean` | None | No | iOS | No | Changes the iOS capture strategy to use renderInContext instead of drawViewHierarchyInRect, which may help in some cases. |
294+| handleGLSurfaceViewOnAndroid | `boolean` | `false` | No | Android | No | When true, captures SurfaceView content when the view is a SurfaceView or contains one in its view tree. |
281 295 
282## APIs296## APIs
283 297 
@@ -285,66 +299,43 @@ export function ViewShotDemo() {
285 299 
286> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.300> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
287 301 
288-| Name | Description | Type | Required | Platform | HarmonyOS Support |302+| Name | Type | Parameter Type | Return Value | Required | Platform | OpenHarmony Platform Support | Description |
289-| ---------------- | ----------- | -------- | -------- | ------------ | ----------------- |303+| --- | --- | --- | --- | --- | --- | --- | --- |
290-| `captureRef` | component screenshot | function | no | Android, iOS | yes |304+| `captureRef` | function | `view: number \| ReactInstance \| RefObject&lt;T&gt;; optionsObject?: CaptureOptions` | `Promise&lt;string&gt;` | `view`: yes; `optionsObject`: no | Android, iOS | yes | Captures a specified component and returns the snapshot result. |
291-| `captureScreen` | screenshot | function | no | Android, iOS | yes |305+| `captureScreen` | function | `optionsObject?: CaptureOptions` | `Promise&lt;string&gt;` | no | Android, iOS | yes | Captures the current screen and returns the snapshot result. |
292-| `releaseCapture` | resource release | function | no | Android, iOS | yes |306+| `releaseCapture` | function | `uri: string` | `void` | yes | Android, iOS | yes | Releases a temporary file created by a capture. |
307+| `ViewShot.capture()` | function | / | `Promise&lt;string&gt;` | / | Android, iOS | yes | Imperatively captures the ViewShot component through the component ref's `current.capture()` method using the component's `options`; use it to trigger a capture manually when `captureMode` is not set. |
293 308 
294## Known Issues309## Known Issues
295-- [ ] The captured component needs to set a background color, otherwise the screenshot effect will be completely black [issues#3](https://github.com/react-native-oh-library/react-native-view-shot/issues/3)。310+- [ ] The captured component needs to set a background color, otherwise the screenshot effect will be completely black [issues#3](https://github.com/react-native-oh-library/react-native-view-shot/issues/3).
296-- [ ] The screenshot configuration items snapshotContentContainer and useRenderInContext have not been implemented yet [issues#34](https://github.com/react-native-oh-library/react-native-view-shot/issues/34)。311+- [ ] The screenshot configuration items snapshotContentContainer and useRenderInContext have not been implemented yet [issues#34](https://github.com/react-native-oh-library/react-native-view-shot/issues/34).
297 312 
298-## Others313+## Other
299None314None
300 315
301## Directory Structure316## Directory Structure
302-````317+````text
303-/rntpc_react-native-view-shot # Project root directory318+rntpc_react-native-view-shot/
304-│ LICENSE319+├─src
305-│ OAT.xml320+│ │ index.js # JavaScript entry and ViewShot component
306-│ package.json321+│ │ index.d.ts # TypeScript declarations
307-│ README.md322+│ │ NativeModule.js # Native module entry
308-│ README.OpenSource323+│ └─ NativeViewShot.js # TurboModule specification
309-│ README_en.md324+└─harmony
310-│325+ └─view_shot # HarmonyOS adaptation core code
311-├─example326+ │ Index.ets # HAR module entry
312-│327+ │ ts.ts # ArkTS export entry
313-├─harmony328+ └─src
314-│ │ view_shot.har # Compiled HAR package (HarmonyOS Archive)329+ └─main
315-│ │330+ ├─cpp # C++ TurboModule registration and bindings
316-│ └─view_shot # HarmonyOS adaptation core code331+ │ │ CMakeLists.txt
317-│ │ .gitignore332+ │ │ ViewShotPackage.h
318-│ │ build-profile.json5333+ │ │ ViewShotTurboModule.cpp
319-│ │ hvigorfile.ts334+ │ └─ ViewShotTurboModule.h
320-│ │ Index.ets335+ └─ets # ArkTS implementation
321-│ │ oh-package.json5336+ │ Logger.ts
322-│ │ ts.ets337+ │ ViewShotPackage.ts
323-│ │338+ └─ ViewShotTurboModule.ts
324-│ └─src
325-│ └─main
326-│ │ module.json5
327-│ │
328-│ ├─cpp # C++ (Fabric/TurboModule)
329-│ │ CMakeLists.txt
330-│ │ ViewShotPackage.h
331-│ │ ViewShotTurboModule.cpp
332-│ │ ViewShotTurboModule.h
333-│ │
334-│ ├─ets # ArkTS business layer
335-│ │ Logger.ts
336-│ │ ViewShotPackage.ets
337-│ │ ViewShotTurboModule.ets
338-│ │
339-│ └─resources # source file
340-│
341-└─src
342- │ index.tsx
343- │ RNViewShot.ts
344- │ RNViewShot.web.ts
345- │
346- └─specs
347- NativeRNViewShot.ts
348````339````
349 340
350## How to Contribute341## How to Contribute
Mpackage.json+8-4
@@ -23,14 +23,18 @@
23 "viewshot",23 "viewshot",
24 "view-snapshot",24 "view-snapshot",
25 "snapshot",25 "snapshot",
26- "rasterize"26+ "rasterize",
27+ "harmony",
28+ "ohos",
29+ "openharmony",
30+ "rnoh"
27 ],31 ],
28 "author": "Gaëtan Renaudeau <renaudeau.gaetan@gmail.com>",32 "author": "Gaëtan Renaudeau <renaudeau.gaetan@gmail.com>",
29- "homepage": "https://gitcode.com/openharmony-sig/rntpc_react-native-view-shot",33+ "homepage": "https://gitcode.com/CPF-RN/rntpc_react-native-view-shot/tree/br_rnoh0.77",
30 "license": "MIT",34 "license": "MIT",
31 "repository": {35 "repository": {
32 "type": "git",36 "type": "git",
33- "url": "https://gitcode.com/openharmony-sig/rntpc_react-native-view-shot.git"37+ "url": "https://gitcode.com/CPF-RN/rntpc_react-native-view-shot.git"
34 },38 },
35 "dependencies": {39 "dependencies": {
36 "react-native-view-shot": "3.8.0",40 "react-native-view-shot": "3.8.0",
@@ -45,4 +49,4 @@
45 "html-webpack-plugin": "^5.5.1",49 "html-webpack-plugin": "^5.5.1",
46 "react-native-windows": "^0.63.16"50 "react-native-windows": "^0.63.16"
47 }51 }
48-}52+}