Star436
507
代码
代码
Issues85
Pull Requests81
项目讨论
Wiki
分析
Star436
507
已合并
doc: refine docs/en/README.md; chore: fix link checker #1114
Arek Kasprzyk创建于 2025年6月6日
doc: refine docs/en/README.md; chore: fix link checker #1114
已合并
Arek Kasprzyk创建于 2025年6月6日
从arkadiuszkasprzyk/ohos_react_nativekas/docs-refinement合入到CPF-RN/ohos_react_native0.77.1-rc.1-ohos
共 15 个文件变更+126-85
MREADME.md+5-5
@@ -2,11 +2,11 @@
2 2 
3本项目为 [React Native](https://reactnative.dev/) 跨平台应用开发框架添加 [OpenHarmony](https://www.openharmony.cn/mainPlay) 平台支持3本项目为 [React Native](https://reactnative.dev/) 跨平台应用开发框架添加 [OpenHarmony](https://www.openharmony.cn/mainPlay) 平台支持
4 4 
5-| 角色 / Role | 中文文档 | English Docs |5+| 角色 / Role | 中文文档 | English Docs |
6-| ------------------------------------------ | ----------------------------------- | -------------------------------- |6+| ------------------------------------------ | ----------------------------------- | ------------------------------------------------------------ |
7-| 应用开发者 / Application Developer | [README.md](./docs/zh-cn/README.md) | [README.md](./docs/en/README.md) |7+| 应用开发者 / Application Developer | [README.md](./docs/zh-cn/README.md) | [README.md](./docs/en/README.md#rnoh-application-developers) |
8-| 库开发者 / Library Developer | — | — |8+| 库开发者 / Library Developer | — | [README.md](./docs/en/README.md#rnoh-library-developers) |
9-| 维护者或贡献者 / Maintainer or Contributor | [启动开发](#启动开发) | — |9+| 维护者或贡献者 / Maintainer or Contributor | [启动开发](#启动开发) | [README.md](./docs/rnoh-maintainers/README.md) |
10 10 
11 11 
12## RNOH版本演进规划和分支策略12## RNOH版本演进规划和分支策略
Mdocs/en/Codegen.md+2-2
@@ -10,7 +10,7 @@ The `Codegen` function of RNOH is supported since `rnoh-react-native-harmony-0.7
10 10 
11The following two demo projects describe how to use the `Codegen`:11The following two demo projects describe how to use the `Codegen`:
12 12 
13-* [Demo Project of TuboModule](../Samples/using_TurboModule/README.md)13+* [Demo Project of TuboModule](../Samples/using_turboModule/README.md)
14* [Custom Fabric Component](../Samples/FabricComponentSample/README.md)14* [Custom Fabric Component](../Samples/FabricComponentSample/README.md)
15 15 
16## Usage16## Usage
@@ -29,7 +29,7 @@ For Android and iOS, the procedure of using Codegen to create Turbo Native Modul
29For details, see the following documents:29For details, see the following documents:
30 30 
31* [Implementation of a Custom TurboModule](./TurboModule.md)31* [Implementation of a Custom TurboModule](./TurboModule.md)
32-* [Custom Component Development Guide](./custom-component.md)32+* [Custom Component Development Guide](./custom-components.md)
33* [Usage of the C-API Component Hybrid Solution](./usage-of-c-api-component-hybrid-solution.md)33* [Usage of the C-API Component Hybrid Solution](./usage-of-c-api-component-hybrid-solution.md)
34 34 
35### Codegen Configuration35### Codegen Configuration
Mdocs/en/README.md+44-9文件内容审核中，请稍后刷新重试
Rdocs/en/framework.md→docs/en/about-react-native.md+1-1
@@ -1,4 +1,4 @@
1-# Framework1+# About React Native
2React Native is an open-source framework based on JavaScript and React frameworks. It is used to build native mobile applications. It allows you to use React's component model and declarative programming style to build cross-platform mobile applications.2React Native is an open-source framework based on JavaScript and React frameworks. It is used to build native mobile applications. It allows you to use React's component model and declarative programming style to build cross-platform mobile applications.
3 3 
4Main features and detailed introduction:4Main features and detailed introduction:
Mdocs/en/api-description.md+5-2文件内容审核中，请稍后刷新重试
Mdocs/en/common-development-scenarios.md+4-2
@@ -1,5 +1,7 @@
1## Common Development Scenarios1## Common Development Scenarios
2 2 
3+> WARNING: This document hasn't been updated for RNOH 0.77.
4+ 
3### How Do I Use onForeGround and onBackGround?5### How Do I Use onForeGround and onBackGround?
4 6 
5`onForeground` and `onBackground` are used to solve the problem that `AppState.addEventListener('change', this.handleAppStateChange)` is not called back when the page redirects or returns. The following describes the usage:7`onForeground` and `onBackground` are used to solve the problem that `AppState.addEventListener('change', this.handleAppStateChange)` is not called back when the page redirects or returns. The following describes the usage:
@@ -209,7 +211,7 @@ The procedure for loading multiple bundles is as follows:
2092. During project initialization, create the required `RNInstance` instance and call the `runJSBundle` API to load the basic bundle.2112. During project initialization, create the required `RNInstance` instance and call the `runJSBundle` API to load the basic bundle.
2103. When loading the corresponding service module, call the `runJSBundle` API to load the service bundle.2123. When loading the corresponding service module, call the `runJSBundle` API to load the service bundle.
211 213 
212-For details, see [RN Native Access > Single-Instance Single-Surface Multi-Bundle](../en/rn-native-access.md).214+For details, see [MultiBundleSample](../Samples/MutilBundleSample/README.md).
213 215 
214### How Do I Use Components Based on the ArkUI Declarative Paradigm in the C-API Version?216### How Do I Use Components Based on the ArkUI Declarative Paradigm in the C-API Version?
215 217 
@@ -549,7 +551,7 @@ A large OpenHarmony Ability Package (HAP) may occupy more resources during appli
549 551 
550### How Do I Adapt to Foldable Screens?552### How Do I Adapt to Foldable Screens?
551 553 
552-For details, see [Multi-Screen Adaptation Guide](multi-screen-adaptation-guide.md).554+T.B.D.
553 555 
554### How Do I Enable Secure Compilation by Using a .so File?556### How Do I Enable Secure Compilation by Using a .so File?
555 557 
Mdocs/en/custom-components.md+2-2
@@ -162,7 +162,7 @@ RNSurface({
162 162 
163### 3. Write C++ code of Codegen163### 3. Write C++ code of Codegen
164 164 
165-You can use [Codegen](codegen.md) to generate the glue code for C++ or manually implement the code. However, Codegen is recommended. This section describes how to manually implement the code.165+You can use [Codegen](./Codegen.md) to generate the glue code for C++ or manually implement the code. However, Codegen is recommended. This section describes how to manually implement the code.
166 166 
1671. Create a C++ class for `Props` and `Emitter`, and bind the C++ class to `Descriptor`.1671. Create a C++ class for `Props` and `Emitter`, and bind the C++ class to `Descriptor`.
1682. Implement the `handleEvent` method of `MarqueeViewEventEmitRequestHandler`, and call `eventEmitter` to send an event message to the RN component based on the event name of native message.1682. Implement the `handleEvent` method of `MarqueeViewEventEmitRequestHandler`, and call `eventEmitter` to send an event message to the RN component based on the event name of native message.
@@ -687,7 +687,7 @@ void ButtonNode::onNodeEvent(
687 687 
688### 3. Write C++ code of Codegen688### 3. Write C++ code of Codegen
689 689 
690-You can use [Codegen](codegen.md) to generate the glue code for C++ or manually implement the code. However, Codegen is recommended. This section describes how to manually implement the code.690+You can use [Codegen](./Codegen.md) to generate the glue code for C++ or manually implement the code. However, Codegen is recommended. This section describes how to manually implement the code.
691 691 
6921. Create a C++ class for `Props` and `Emitter`, bind the class to `Descriptor`, and register the `Node` type.6921. Create a C++ class for `Props` and `Emitter`, bind the class to `Descriptor`, and register the `Node` type.
6932. Implement the `ButtonViewJSIBinder` class for **Props** and **Emitter** binding.6932. Implement the `ButtonViewJSIBinder` class for **Props** and **Emitter** binding.
Mdocs/en/debugging.md+4-22
@@ -1,5 +1,7 @@
1# Debugging1# Debugging
2 2 
3+> WARNING: This document hasn't been updated for RNOH 0.77.
4+ 
3## Metro Hot Reloading5## Metro Hot Reloading
4 6 
5`React Native` uses [`Metro`](https://metrobundler.dev/) to build your `JavaScript` code and assets. This section describes how to configure and use Metro.7`React Native` uses [`Metro`](https://metrobundler.dev/) to build your `JavaScript` code and assets. This section describes how to configure and use Metro.
@@ -167,7 +169,7 @@ When Metro is used to load a bundle, application update can be triggered in the
1672. Open the app on your phone.1692. Open the app on your phone.
1683. Enter `d` in the command line tool. The `React Native Dev Menu` dialog box is displayed on the mobile phone.1703. Enter `d` in the command line tool. The `React Native Dev Menu` dialog box is displayed on the mobile phone.
169 171 
170- ![Debugging-Open-DevMenu](figures/debugging-open-DevMenu.png)172+ ![Debugging-Open-DevMenu](figures/debugging-open-DevMenu.PNG)
171 173 
172### Element Inspector174### Element Inspector
173 175 
@@ -184,7 +186,7 @@ You can use `Element Inspector` to view the box model and style of the RN elemen
184 186 
185### React DevTools187### React DevTools
186 188 
187-`React DevTools` can be used to debug the React component hierarchy within your application. The standalone version of `React DevTools` allows connecting to `React Native` applications. To use it, [install or run the react-devtools package](https://reactnative.dev/docs/next/react-devtools). Do the following:189+`React DevTools` can be used to debug the React component hierarchy within your application. The standalone version of `React DevTools` allows connecting to `React Native` applications. To use it, [install or run the react-devtools package](https://reactnative.dev/docs/0.77/react-native-devtools). Do the following:
188 190 
1891. Create a command line tool and run it.1911. Create a command line tool and run it.
190 192 
@@ -219,26 +221,6 @@ RNApp({
219 221 
220Use either of the following methods to set a breakpoint and debug your code.222Use either of the following methods to set a breakpoint and debug your code.
221 223 
222-#### Flipper
223- 
224-Flipper is a mobile application debugger. You can download and install it from the [official website](https://fbflipper.com/) or [github](https://github.com/facebook/flipper/releases).
225- 
226-1. (Optional) After the installation is complete, add `Flipper.exe` to the environment variable.
227-2. Load a bundle by using Metro and open the `React Native Dev Menu` dialog box on the mobile phone application page.
228-3. Choose `Open Debugger`. The debugger page is displayed, as shown in the following figure.
229- 
230- ![Debugging-Open-flipper](figures/debugging-open-flipper.png)
231- 
232- If the environment variable is not configured, Flipper may fail to be opened. In this case, you can manually open Flipper and select `React Native` in the area marked with 1 to achieve the preceding effect.
233- 
234-4. Choose `Hermes Debugger (RN)` > `Sources`, press `Ctrl+P (or Command+P on macOS)`, enter the name of the file to be debugged, and select the file to open the source code. Click the line number to add a breakpoint. The code automatically stops when it reaches this line, as shown in the following figure.
235- 
236- ![Debugging-flipper_debug](figures/debugging-flipper_debug.png)
237- 
238-5. You can also write the statement `debugger` in the code to connect to Flipper. When the code running reaches `debugger`, Flipper automatically opens the source code and locates `debugger` for debugging, as shown in the following figure.
239- 
240- ![Debugging-flipper_debugger](figures/debugging-flipper_debugger.png)
241- 
242#### Chrome DevTools224#### Chrome DevTools
243 225 
244If Flipper is not installed, you can use `Chrome DevTools` to debug code. Do the following:226If Flipper is not installed, you can use `Chrome DevTools` to debug code. Do the following:
Mdocs/en/environment-setup.md+2-0
@@ -1,5 +1,7 @@
1# Environment Setup1# Environment Setup
2 2 
3+> WARNING: This document has not been updated for RNOH 0.77. Some instructions could be incorrect or outdated.
4+ 
3- Environment setup5- Environment setup
4 6 
5 1. Install DevEco Studio. For details, see [Downloading Software](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-software-download-V5) and [Installing Software](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-software-install-V5).7 1. Install DevEco Studio. For details, see [Downloading Software](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-software-download-V5) and [Installing Software](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-software-install-V5).
Ddocs/en/function-development.md+0-14
@@ -1,14 +0,0 @@
1-# Function Development
2- 
3-- [RN JS Bundle](rn-js-bundle.md)
4-- [RN Native Access](rn-native-access.md)
5-- [API Description](api-description.md)
6-- [Communication Between Two Ends](communication-between-two-ends.md)
7-- [Codegen](Codegen.md)
8-- [Custom TurboModule](TurboModule.md)
9-- [Custom Components](custom-components.md)
10-- [Communication Between ArkTS and CPP](arkts-cpp-communication.md)
11-- [Usage of the C-API Component Hybrid Solution](usage-of-c-api-component-hybrid-solution.md)
12- 
13-#### Additional Information
14-> Currently, NativeModule is not supported. Only TurboModule is supported.
Rdocs/application-developers/supported-api.md→docs/en/supported-api.md+0-0
文件重命名但无更改。
Adocs/rnoh-maintainers/README.md+9-0文件内容审核中，请稍后刷新重试
Mdocs/rnoh-maintainers/performace-analysis-instructions.md+3-3文件内容审核中，请稍后刷新重试
Mscripts/verify-docs.ts+45-16
@@ -1,32 +1,61 @@
1-import { exec } from "child_process";1+import { exec } from 'node:child_process';
2-import { glob } from "glob";2+import { glob } from 'glob';
3+import fs from 'node:fs';
4+import pathUtils from 'node:path';
3 5 
4-async function runMarkdownLinkCheck(filePath: string): Promise<void> {6+async function runMarkdownLinkCheck(
7+ filePath: string
8+): Promise<{ ok: true; error?: never } | { ok?: never; error: string }> {
5 return new Promise((resolve, reject) => {9 return new Promise((resolve, reject) => {
6- exec(`npx markdown-link-check -c .markdown-link-check.json ${filePath}`, (error, stdout, stderr) => {10+ if (!fs.existsSync(filePath)) {
7- if (error?.message.includes("ERROR")) {11+ resolve({ error: `${filePath} doesn't exist` });
8- return reject(error);12+ return;
13+ }
14+ exec(`npx markdown-link-check ${filePath}`, (error, stdout, stderr) => {
15+ if (error?.message.includes('ERROR')) {
16+ resolve({ error: filePath + ': ' + error.message + '\n' + stdout });
17+ return;
9 }18 }
10- if (stderr.includes("ERROR")) {19+ if (stderr.includes('ERROR')) {
11- return reject(stdout);20+ resolve({ error: filePath + ': ' + stderr + '\n' + stdout });
21+ return;
12 }22 }
13- resolve();23+ resolve({ ok: true });
14 });24 });
15 });25 });
16}26}
17 27 
18(async () => {28(async () => {
19 try {29 try {
20- console.log("🧐 Checking links in Markdown files");30+ const ignoreFilePathPatterns = [
31+ `docs${pathUtils.sep}Samples`,
32+ `docs${pathUtils.sep}zh-cn`,
33+ ];
34+ console.log(
35+ `🧐 Checking links in Markdown files except: ${ignoreFilePathPatterns.join(', ')}`
36+ );
37+ const markdownFiles = (await glob('./docs/**/*.md')).filter((filePath) => {
38+ return !ignoreFilePathPatterns.some((pattern) =>
39+ filePath.includes(pattern)
40+ );
41+ });
42+ markdownFiles.push('./README.md');
21 43 
22- const markdownFiles = await glob("./docs/**/*.md");44+ const errorMsg = (
23- markdownFiles.push("./README.md");45+ await Promise.all(markdownFiles.map(runMarkdownLinkCheck))
46+ )
47+ .filter((result) => !!result.error)
48+ .reduce((acc, result) => {
49+ acc += result.error;
50+ return acc;
51+ }, '');
52+ if (errorMsg) {
53+ throw new Error(errorMsg);
54+ }
24 55 
25- await Promise.all(markdownFiles.map(runMarkdownLinkCheck));56+ console.log('👌 All checks completed');
26- 
27- console.log("👌 All checks completed");
28 } catch (error) {57 } catch (error) {
29- console.error("☹️ Error occurred during the link verification process");58+ console.error('☹️ Error occurred during the link verification process');
30 console.error(error);59 console.error(error);
31 process.exit(1);60 process.exit(1);
32 }61 }