Star438
507
代码
代码
Issues81
Pull Requests78
项目讨论
Wiki
分析
Star438
507
已合并
doc: upgrade samples #1260
linhandev创建于 2025年7月7日
doc: upgrade samples #1260
已合并
linhandev创建于 2025年7月7日
从linhandev/ohos_react_nativesample-upgrade合入到CPF-RN/ohos_react_native0.77.1-rc.1-ohos
共 83 个文件变更+639-302
Mdocs/Samples/Capture_bundle/NativeProject/entry/.gitignore+2-1
@@ -3,4 +3,5 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+src/main/resources/rawfile/bundle.harmony.js
Mdocs/Samples/Capture_bundle/NativeProject/entry/oh-package.json5+3-1
@@ -5,6 +5,8 @@
5 "main": "",5 "main": "",
6 "author": "",6 "author": "",
7 "license": "",7 "license": "",
8- "dependencies": {}8+ "dependencies": {
9+ "@rnoh/react-native-openharmony": "../../ReactProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
10+ }
9}11}
10 12 
Mdocs/Samples/Capture_bundle/README.md+25-19
@@ -1,24 +1,30 @@
1-# 说明1+# README
2 2 
3-这是一个支持捕捉bundle包的内部异常的示例工程。3+This is a sample project that supports capturing exceptions within bundles.
4 4 
5-# 目录结构5+## Directory Structure
6 6 
7-ReactProject -- RN 侧工程 7+```shell
8-NativeProject -- 原生工程8+├── NativeProject -- Native project
9+└── ReactProject -- RN project
10+```
9 11 
10-# 环境搭建12+## Environment Setup
11 13 
12-1. 在 `ReactProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；14+1. In the `ReactProject` directory, execute **npm i** to install dependencies, then execute **npm run dev** to generate the bundle;
13-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；15+2. Open `NativeProject` with DevEco Studio, execute **Sync and Refresh Project**;
14-3. 检查 `NativeProject`、`entry` 目录下是否生成 `oh-modules` 文件夹；16+3. Click File > Project Structure > Signing Configs, log in and complete the signing;
15-4. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；17+4. Click **run** in the upper right corner to start the project.
16-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；
17-6. 点击右上角的 **run** 启动项目。
18 18 
19+> NOTE: By default, the project uses the latest RNOH dependency during installation. If you need to install a specific version, please refer to [RNOH Version Evolution Planning and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md) to get the version number.
20+>
21+> npm dependency installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
22+>
23+> ohpm dependency installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
19 24 
20-# 效果预览25+## Preview
21-启动后页面效果如下：26+ 
27+After launch, the page effects are as follows:
22 28 
23<table style="width: 100%; margin: 0 auto; text-align: center;">29<table style="width: 100%; margin: 0 auto; text-align: center;">
24 <thead>30 <thead>
@@ -43,19 +49,19 @@ NativeProject -- 原生工程
43 <tbody>49 <tbody>
44 <tr>50 <tr>
45 <td style="width: 20%;">51 <td style="width: 20%;">
46- 首页52+ Home Page
47 </td>53 </td>
48 <td style="width: 20%;">54 <td style="width: 20%;">
49- 点击【ReferenceError】按钮55+ Click [ReferenceError] button
50 </td>56 </td>
51 <td style="width: 20%;">57 <td style="width: 20%;">
52- 点击【Standard Error】按钮58+ Click [Standard Error] button
53 </td>59 </td>
54 <td style="width: 20%;">60 <td style="width: 20%;">
55- 点击【Frozen Error】按钮61+ Click [Frozen Error] button
56 </td>62 </td>
57 <td style="width: 20%;">63 <td style="width: 20%;">
58- 点击【Warning】按钮64+ Click [Warning] button
59 </td>65 </td>
60 </tr>66 </tr>
61 </tbody>67 </tbody>
Adocs/Samples/Capture_bundle/README_zh.md+68-0
@@ -0,0 +1,68 @@
1+# 说明
2+ 
3+这是一个支持捕捉bundle内部异常的示例工程
4+ 
5+## 目录结构
6+ 
7+```shell
8+├── NativeProject -- 原生工程
9+└── ReactProject -- RN 工程
10+```
11+ 
12+## 环境搭建
13+ 
14+1. 在 `ReactProject` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
15+2. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；
16+3. 点击 File > Project Structure > Signing Configs，登录并进行签名；
17+4. 点击右上角的 **run** 启动项目。
18+ 
19+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
20+>
21+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
22+>
23+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
24+ 
25+## 效果预览
26+ 
27+启动后页面效果如下：
28+ 
29+<table style="width: 100%; margin: 0 auto; text-align: center;">
30+ <thead>
31+ <tr>
32+ <th style="width: 20%;">
33+ <img src="./screenshots/Screenshot_home.jpeg" alt="Screenshot_home">
34+ </th>
35+ <th style="width: 20%;">
36+ <img src="./screenshots/Screenshot_reference.jpeg" alt="Screenshot_reference">
37+ </th>
38+ <th style="width: 20%;">
39+ <img src="./screenshots/Screenshot_standard.jpeg" alt="Screenshot_standard">
40+ </th>
41+ <th style="width: 20%;">
42+ <img src="./screenshots/Screenshot_Frozen.jpeg" alt="Screenshot_Frozen">
43+ </th>
44+ <th style="width: 20%;">
45+ <img src="./screenshots/Screenshot_Warning.jpeg" alt="Screenshot_Warning">
46+ </th>
47+ </tr>
48+ </thead>
49+ <tbody>
50+ <tr>
51+ <td style="width: 20%;">
52+ 首页
53+ </td>
54+ <td style="width: 20%;">
55+ 点击【ReferenceError】按钮
56+ </td>
57+ <td style="width: 20%;">
58+ 点击【Standard Error】按钮
59+ </td>
60+ <td style="width: 20%;">
61+ 点击【Frozen Error】按钮
62+ </td>
63+ <td style="width: 20%;">
64+ 点击【Warning】按钮
65+ </td>
66+ </tr>
67+ </tbody>
68+</table>
Mdocs/Samples/Capture_bundle/ReactProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/Capture_bundle/ReactProject/package.json+6-4
@@ -11,11 +11,14 @@
11 "dev": "react-native bundle-harmony --dev false --bundle-output ../NativeProject/entry/src/main/resources/rawfile/bundle.harmony.js"11 "dev": "react-native bundle-harmony --dev false --bundle-output ../NativeProject/entry/src/main/resources/rawfile/bundle.harmony.js"
12 },12 },
13 "dependencies": {13 "dependencies": {
14- "@react-native-oh/react-native-harmony": "^0.72.48",14+ "react": "18.3.1",
15- "react": "18.2.0",15+ "react-native": "0.77.1",
16- "react-native": "0.72.5"16+ "@react-native-oh/react-native-harmony": "^0.77.9"
17 },17 },
18 "devDependencies": {18 "devDependencies": {
19+ "@react-native-community/cli": "15.0.1",
20+ "@react-native/babel-preset": "0.77.1",
21+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
19 "@babel/core": "^7.20.0",22 "@babel/core": "^7.20.0",
20 "@babel/preset-env": "^7.20.0",23 "@babel/preset-env": "^7.20.0",
21 "@babel/runtime": "^7.20.0",24 "@babel/runtime": "^7.20.0",
@@ -27,7 +30,6 @@
27 "babel-jest": "^29.2.1",30 "babel-jest": "^29.2.1",
28 "eslint": "^8.19.0",31 "eslint": "^8.19.0",
29 "jest": "^29.2.1",32 "jest": "^29.2.1",
30- "metro-react-native-babel-preset": "0.76.8",
31 "prettier": "^2.4.1",33 "prettier": "^2.4.1",
32 "react-test-renderer": "18.2.0",34 "react-test-renderer": "18.2.0",
33 "typescript": "4.8.4"35 "typescript": "4.8.4"
Mdocs/Samples/Capture_bundle/ReactProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/FabricComponentSample/NativeProject/build-profile.json5+1-1
@@ -5,7 +5,7 @@
5 {5 {
6 "name": "default",6 "name": "default",
7 "signingConfig": "default",7 "signingConfig": "default",
8- "compatibleSdkVersion": "5.0.1(13)",8+ "compatibleSdkVersion": "5.0.1(13)",
9 "runtimeOS": "HarmonyOS",9 "runtimeOS": "HarmonyOS",
10 }10 }
11 ],11 ],
Mdocs/Samples/FabricComponentSample/NativeProject/entry/.gitignore+3-1
@@ -3,4 +3,6 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/src/main/cpp/generated
8+/src/main/resources/rawfile/bundle.harmony.js
Mdocs/Samples/FabricComponentSample/NativeProject/entry/oh-package.json5+1-0
@@ -7,5 +7,6 @@
7 "main": "",7 "main": "",
8 "version": "1.0.0",8 "version": "1.0.0",
9 "dependencies": {9 "dependencies": {
10+ "@rnoh/react-native-openharmony": "../../ReactProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
10 }11 }
11}12}
Mdocs/Samples/FabricComponentSample/README_zh.md+15-11
@@ -1,6 +1,6 @@
1# 说明1# 说明
2-这是创建自定义Fabric组件（包括CAPI组件和ArkTS组件）的demo工程。
3 2 
3+这是创建自定义Fabric组件（包括CAPI组件和ArkTS组件）的demo工程
4 4 
5## 目录结构5## 目录结构
6 6 
@@ -14,19 +14,23 @@ FabricComponentSample
14└── README.md14└── README.md
15```15```
16 16 
17- 
18## 环境搭建17## 环境搭建
19-1. 在 `fabric-component-sample-package` 中运行 **npm pack** 生成tgz文件；18+ 
20-2. 在 `ReactProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖;19+1. 在 `fabric-component-sample-package` 中运行 **npm pack** 进行打包；
21-3. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；20+2. 在 `ReactProject` 目录下执行 **npm i** 安装依赖;
22-4. 回到 `ReactProject` 目录执行 **npm run dev** 生成 bundle，运行 **npm start** 启动metro服务；21+3. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；
23-5. 检查 `NativeProject`、`entry` 目录下是否生成 `oh-modules` 文件夹；22+5. 点击 File > Project Structure > Signing Configs，登录并完成签名；
24-6. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；23+6. 在 `ReactProject` 目录下执行 **npm run dev** 使用 codegen 进行代码生成，打包 bundle;
25-7. 点击 File > Project Structure > Signing Configs，登录并完成签名；24+7. 点击 DevEco Studio 右上角的 **run** 启动项目；
26-8. 点击右上角的 **run** 启动项目；25+ 
27-9. 如果启动的是metro服务，还需要运行 `hdc rport tcp:8081 tcp:8081` 来转发8081端口，然后再在手机上重新打开应用。26+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
27+>
28+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
29+>
30+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
28 31 
29## 效果预览32## 效果预览
33+ 
30启动后页面效果如下：34启动后页面效果如下：
31 35 
32![FabricComponentSample运行界面](./screenshots/Screenshot.jpeg)36![FabricComponentSample运行界面](./screenshots/Screenshot.jpeg)
Adocs/Samples/FabricComponentSample/ReactProject/babel.config.js+10-0文件内容审核中，请稍后刷新重试
Mdocs/Samples/FabricComponentSample/ReactProject/package.json+6-10
@@ -9,12 +9,16 @@
9 "codegen": "react-native codegen-harmony --cpp-output-path ../NativeProject/entry/src/main/cpp/generated --rnoh-module-path ../NativeProject/entry/oh_modules/@rnoh/react-native-openharmony --no-safety-check"9 "codegen": "react-native codegen-harmony --cpp-output-path ../NativeProject/entry/src/main/cpp/generated --rnoh-module-path ../NativeProject/entry/oh_modules/@rnoh/react-native-openharmony --no-safety-check"
10 },10 },
11 "dependencies": {11 "dependencies": {
12- "react": "18.2.0",12+ "react": "18.3.1",
13- "react-native": "0.72.5",13+ "react-native": "0.77.1",
14+ "@react-native-oh/react-native-harmony": "^0.77.9",
14 "react-native-performance": "^5.1.2",15 "react-native-performance": "^5.1.2",
15 "fabric-component-sample-package": "file:../fabric-component-sample-package/fabric-component-sample-package-1.0.0.tgz"16 "fabric-component-sample-package": "file:../fabric-component-sample-package/fabric-component-sample-package-1.0.0.tgz"
16 },17 },
17 "devDependencies": {18 "devDependencies": {
19+ "@react-native-community/cli": "15.0.1",
20+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
21+ "@react-native/babel-preset": "0.77.1",
18 "@babel/core": "^7.20.0",22 "@babel/core": "^7.20.0",
19 "@babel/preset-env": "^7.20.0",23 "@babel/preset-env": "^7.20.0",
20 "@babel/runtime": "^7.20.0",24 "@babel/runtime": "^7.20.0",
@@ -26,18 +30,10 @@
26 "babel-jest": "^29.2.1",30 "babel-jest": "^29.2.1",
27 "eslint": "^8.19.0",31 "eslint": "^8.19.0",
28 "jest": "^29.2.1",32 "jest": "^29.2.1",
29- "metro-react-native-babel-preset": "0.76.8",
30 "prettier": "^2.4.1",33 "prettier": "^2.4.1",
31 "react-test-renderer": "18.2.0",34 "react-test-renderer": "18.2.0",
32 "typescript": "4.8.4"35 "typescript": "4.8.4"
33 },36 },
34- "overrides": {
35- "@react-native-community/cli": "11.3.6",
36- "@react-native/codegen": "0.74.0"
37- },
38- "resolutions": {
39- "@react-native-community/cli": "11.3.6"
40- },
41 "engines": {37 "engines": {
42 "node": ">=16"38 "node": ">=16"
43 }39 }
Mdocs/Samples/FabricComponentSample/ReactProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/FabricComponentSample/fabric-component-sample-package/package.json+2-2
@@ -35,8 +35,8 @@
35 },35 },
36 "devDependencies": {36 "devDependencies": {
37 "@types/react": "^18.2.47",37 "@types/react": "^18.2.47",
38- "react": "18.2.0",38+ "react": "18.3.1",
39- "react-native": "0.72.5"39+ "react-native": "0.77.1"
40 },40 },
41 "dependencies": {}41 "dependencies": {}
42}42}
Mdocs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/.gitignore+2-1
@@ -3,4 +3,5 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/src/main/resources/rawfile/bundle/bundle.harmony.bundle
Mdocs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/oh-package.json5+1-0
@@ -6,6 +6,7 @@
6 "author": "",6 "author": "",
7 "license": "",7 "license": "",
8 "dependencies": {8 "dependencies": {
9+ "@rnoh/react-native-openharmony": "../../GenerateBundle/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
9 },10 },
10 "devDependencies": {},11 "devDependencies": {},
11 "dynamicDependencies": {}12 "dynamicDependencies": {}
Mdocs/Samples/FrameNodeSample/GenerateBundle/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/FrameNodeSample/GenerateBundle/package.json+6-3
@@ -11,10 +11,14 @@
11 "dev": "react-native bundle-harmony --dev false --entry-file ./index.js --bundle-output ../FrameNodeSampleApp/entry/src/main/resources/rawfile/bundle/bundle.harmony.bundle --config ./generate.config.js"11 "dev": "react-native bundle-harmony --dev false --entry-file ./index.js --bundle-output ../FrameNodeSampleApp/entry/src/main/resources/rawfile/bundle/bundle.harmony.bundle --config ./generate.config.js"
12 },12 },
13 "dependencies": {13 "dependencies": {
14- "react": "18.2.0",14+ "react": "18.3.1",
15- "react-native": "0.72.5"15+ "react-native": "0.77.1",
16+ "@react-native-oh/react-native-harmony": "^0.77.9"
16 },17 },
17 "devDependencies": {18 "devDependencies": {
19+ "@react-native-community/cli": "15.0.1",
20+ "@react-native/babel-preset": "0.77.1",
21+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
18 "@babel/core": "^7.20.0",22 "@babel/core": "^7.20.0",
19 "@babel/preset-env": "^7.20.0",23 "@babel/preset-env": "^7.20.0",
20 "@babel/runtime": "^7.20.0",24 "@babel/runtime": "^7.20.0",
@@ -26,7 +30,6 @@
26 "babel-jest": "^29.2.1",30 "babel-jest": "^29.2.1",
27 "eslint": "^8.19.0",31 "eslint": "^8.19.0",
28 "jest": "^29.2.1",32 "jest": "^29.2.1",
29- "metro-react-native-babel-preset": "0.76.8",
30 "prettier": "^2.4.1",33 "prettier": "^2.4.1",
31 "react-test-renderer": "18.2.0",34 "react-test-renderer": "18.2.0",
32 "typescript": "4.8.4"35 "typescript": "4.8.4"
Mdocs/Samples/FrameNodeSample/GenerateBundle/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/FrameNodeSample/README.md+1-1
@@ -10,7 +10,7 @@ FrameNodeSampleApp -- Native project
10# Environment Setup10# Environment Setup
11 11 
121. In the `GenerateBundle` directory, run **npm i @react-native-oh/react-native-harmony@x.x.x** to install the dependency and run **npm run dev** to generate the bundle.121. In the `GenerateBundle` directory, run **npm i @react-native-oh/react-native-harmony@x.x.x** to install the dependency and run **npm run dev** to generate the bundle.
13-2. In the `entry` directory, run **ohpm i @rnoh/react-native-openharmony@x.x.x** to install the dependency.13+2. In the `entry` directory, run **ohpm i** to install the dependency.
143. Check whether the `oh-modules` folder is generated in the `FrameNodeSampleApp` and `entry` directories.143. Check whether the `oh-modules` folder is generated in the `FrameNodeSampleApp` and `entry` directories.
154. Open `FrameNodeSampleApp` in DevEco Studio and run **Sync and Refresh Project**.154. Open `FrameNodeSampleApp` in DevEco Studio and run **Sync and Refresh Project**.
165. Click File > Project Structure > Signing Configs, log in and complete the signing.165. Click File > Project Structure > Signing Configs, log in and complete the signing.
Mdocs/Samples/FrameNodeSample/README_zh.md+23-15
@@ -1,27 +1,35 @@
1# 说明1# 说明
2 2 
3-这是一个使用 FrameNode 进行 bundle 预加载的 demo 工程。3+这是一个使用 FrameNode 进行 bundle 预加载的 demo 工程
4 4 
5-# 目录结构5+## 目录结构
6 6 
7-GenerateBundle -- RN 侧工程 7+```md
8-FrameNodeSampleApp -- 原生工程8+FrameNodeSample
9+├── GenerateBundle -- RN 侧工程
10+└── FrameNodeSampleApp -- 原生工程
11+```
9 12 
10-# 环境搭建13+## 环境搭建
11 14 
12-1. 在 `GenerateBundle` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；15+1. 在 `GenerateBundle` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
13-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；16+2. 用 DevEco Studio 打开 `FrameNodeSampleApp`，执行 **Sync and Refresh Project**；
14-3. 检查 `FrameNodeSampleApp`、`entry` 目录下是否生成 `oh-modules` 文件夹；17+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
15-4. 用 DevEco Studio 打开 `FrameNodeSampleApp`，执行 **Sync and Refresh Project**；18+4. 点击右上角的 **run** 启动项目。
16-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；19+ 
17-6. 点击右上角的 **run** 启动项目。20+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
21+>
22+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
23+>
24+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
25+ 
26+ 
27+## 效果预览
18 28 
19-# 效果预览
20在成功运行demo工程之后，打开应用如下图所示：29在成功运行demo工程之后，打开应用如下图所示：
21-![FrameNode Sample应用首页](../../zh-cn//figures/framenode_app首页界面图.png)30+![FrameNode Sample应用首页](../../zh-cn/figures/framenode_app首页界面图.png)
22 31 
23**RN 分列列表bundle预加载**32**RN 分列列表bundle预加载**
24操作：点击首页中间的按钮，跳转到新页面中，框内加载出RN bundle中的分列列表。33操作：点击首页中间的按钮，跳转到新页面中，框内加载出RN bundle中的分列列表。
25效果：如下图所示34效果：如下图所示
26-![FrameNode Sample节点容器页面](../../zh-cn//figures/framenode_节点容器界面图.png)35+![FrameNode Sample节点容器页面](../../zh-cn/figures/framenode_节点容器界面图.png)
27- 
Mdocs/Samples/MutilBundleSample/FlightRN/package.json+1-1
@@ -25,7 +25,7 @@
25 "@react-native-community/cli": "15.0.1",25 "@react-native-community/cli": "15.0.1",
26 "@react-native-community/cli-platform-android": "15.0.1",26 "@react-native-community/cli-platform-android": "15.0.1",
27 "@react-native-community/cli-platform-ios": "15.0.1",27 "@react-native-community/cli-platform-ios": "15.0.1",
28- "@react-native-oh/react-native-harmony-cli": "^0.1.0",28+ "@react-native-oh/react-native-harmony-cli": "^0.77.0",
29 "@react-native/babel-preset": "0.77.1",29 "@react-native/babel-preset": "0.77.1",
30 "@react-native/eslint-config": "0.77.1",30 "@react-native/eslint-config": "0.77.1",
31 "@react-native/metro-config": "0.77.1",31 "@react-native/metro-config": "0.77.1",
Mdocs/Samples/MutilBundleSample/HotelRN/package.json+1-1
@@ -25,7 +25,7 @@
25 "@react-native-community/cli": "15.0.1",25 "@react-native-community/cli": "15.0.1",
26 "@react-native-community/cli-platform-android": "15.0.1",26 "@react-native-community/cli-platform-android": "15.0.1",
27 "@react-native-community/cli-platform-ios": "15.0.1",27 "@react-native-community/cli-platform-ios": "15.0.1",
28- "@react-native-oh/react-native-harmony-cli": "^0.1.0",28+ "@react-native-oh/react-native-harmony-cli": "^0.77.0",
29 "@react-native/babel-preset": "0.77.1",29 "@react-native/babel-preset": "0.77.1",
30 "@react-native/eslint-config": "0.77.1",30 "@react-native/eslint-config": "0.77.1",
31 "@react-native/metro-config": "0.77.1",31 "@react-native/metro-config": "0.77.1",
Mdocs/Samples/MutilBundleSample/NativeProject/entry/oh-package.json5+1-1
@@ -7,6 +7,6 @@
7 "main": "",7 "main": "",
8 "version": "1.0.0",8 "version": "1.0.0",
9 "dependencies": {9 "dependencies": {
10- "@rnoh/react-native-openharmony": "file:../../FlightRN/node_modules/@react-native-oh/react-native-harmony/harmony/react_native_openharmony.har"10+ "@rnoh/react-native-openharmony": "file:../../FlightRN/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
11 }11 }
12}12}
Mdocs/Samples/MutilBundleSample/README.md+3-1
@@ -21,8 +21,10 @@ MutilBundleSample
215. Click File > Project Structure > Signing Configs, log in and create signing config.215. Click File > Project Structure > Signing Configs, log in and create signing config.
226. Click **run** in the upper right corner to start the project.226. Click **run** in the upper right corner to start the project.
23 23 
24-> NOTE: The project uses the latest RNOH dependencies by default. If you need to install a specific version, please refer to [RNOH Version Evolution Plan and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md).24+> NOTE: The project uses the latest RNOH dependencies by default. If you need to install a specific version, please refer to [RNOH Version Evolution Plan and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)
25+>
25> npm dependencies installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`26> npm dependencies installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
27+>
26> ohpm dependencies installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`28> ohpm dependencies installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
27 29 
28## Result30## Result
Mdocs/Samples/MutilBundleSample/README_zh.md+3-1
@@ -21,8 +21,10 @@ MutilBundleSample
215. 点击 File > Project Structure > Signing Configs，登录并完成签名。215. 点击 File > Project Structure > Signing Configs，登录并完成签名。
226. 点击右上角的 **run** 启动项目。226. 点击右上角的 **run** 启动项目。
23 23 
24-> NOTE: 项目默认使用最新的RNOH依赖，如需安装特定版本请参考[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)。24+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
25+>
25> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`26> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
27+>
26> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`28> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
27 29 
28## 效果预览30## 效果预览
Mdocs/Samples/NativeReactNavSwitch/NavigationApp/.gitignore+3-1
@@ -9,4 +9,6 @@
9/.clang-format9/.clang-format
10/.clang-tidy10/.clang-tidy
11**/.test11**/.test
12-/.appanalyzer12+/.appanalyzer
13+/entry/src/main/cpp/generated
14+/entry/src/main/resources/rawfile/bundle.harmony.js
Mdocs/Samples/NativeReactNavSwitch/NavigationApp/entry/oh-package.json5+3-1
@@ -5,6 +5,8 @@
5 "main": "",5 "main": "",
6 "author": "",6 "author": "",
7 "license": "",7 "license": "",
8- "dependencies": {}8+ "dependencies": {
9+ "@rnoh/react-native-openharmony": "../../NavigationProject/MainProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
10+ }
9}11}
10 12 
Mdocs/Samples/NativeReactNavSwitch/NavigationProject/MainProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/NativeReactNavSwitch/NavigationProject/MainProject/package.json+8-4
@@ -3,7 +3,7 @@
3 "version": "0.0.1",3 "version": "0.0.1",
4 "private": true,4 "private": true,
5 "scripts": {5 "scripts": {
6- "i": "npm i @react-native-oh/react-native-harmony && npm run pack_react_native_harmony_navigation_package && npm run install:react_native_harmony_navigation_package && npm install",6+ "setup": "npm run pack_react_native_harmony_navigation_package && npm run install:react_native_harmony_navigation_package && npm install",
7 "android": "react-native run-android",7 "android": "react-native run-android",
8 "ios": "react-native run-ios",8 "ios": "react-native run-ios",
9 "lint": "eslint .",9 "lint": "eslint .",
@@ -15,15 +15,20 @@
15 "pack_react_native_harmony_navigation_package": "cd ../react-native-harmony-navigation-package && npm pack && cd ../MainProject"15 "pack_react_native_harmony_navigation_package": "cd ../react-native-harmony-navigation-package && npm pack && cd ../MainProject"
16 },16 },
17 "dependencies": {17 "dependencies": {
18+ "@react-native-oh/react-native-harmony": "^0.77.9",
18 "crypto-js": "4.2.0",19 "crypto-js": "4.2.0",
19 "d3-scale-chromatic": "^3.0.0",20 "d3-scale-chromatic": "^3.0.0",
20- "react": "18.2.0",21+ "react": "18.3.1",
21- "react-native": "0.72.5"22+ "react-native": "0.77.1",
23+ "react-native-harmony-navigation-package": "file:../react-native-harmony-navigation-package/react-native-harmony-navigation-package-1.0.0.tgz"
22 },24 },
23 "devDependencies": {25 "devDependencies": {
24 "@babel/core": "^7.20.0",26 "@babel/core": "^7.20.0",
25 "@babel/preset-env": "^7.20.0",27 "@babel/preset-env": "^7.20.0",
26 "@babel/runtime": "^7.20.0",28 "@babel/runtime": "^7.20.0",
29+ "@react-native-community/cli": "15.0.1",
30+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
31+ "@react-native/babel-preset": "0.77.1",
27 "@react-native/eslint-config": "^0.72.2",32 "@react-native/eslint-config": "^0.72.2",
28 "@react-native/metro-config": "^0.72.11",33 "@react-native/metro-config": "^0.72.11",
29 "@tsconfig/react-native": "^3.0.0",34 "@tsconfig/react-native": "^3.0.0",
@@ -33,7 +38,6 @@
33 "babel-jest": "^29.2.1",38 "babel-jest": "^29.2.1",
34 "eslint": "^8.19.0",39 "eslint": "^8.19.0",
35 "jest": "^29.2.1",40 "jest": "^29.2.1",
36- "metro-react-native-babel-preset": "0.76.8",
37 "prettier": "^2.4.1",41 "prettier": "^2.4.1",
38 "react-test-renderer": "18.2.0",42 "react-test-renderer": "18.2.0",
39 "typescript": "4.8.4"43 "typescript": "4.8.4"
Mdocs/Samples/NativeReactNavSwitch/NavigationProject/MainProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/NativeReactNavSwitch/README.md+41-10
@@ -1,16 +1,47 @@
1# Description1# Description
2+ 
2This is a demo project showcasing navigation between native and RN pages.3This is a demo project showcasing navigation between native and RN pages.
3 4 
5+## Directory Structure
4 6 
5-# Directory Structure7+```md
6-NavigationProject -- RN project 8+NativeReactNavSwitch
7-NavigationApp -- Native project9+├── NavigationProject -- RN project
10+└── NavigationApp -- Native project
11+```
8 12 
13+## Environment Setup
14+1. In the `NavigationProject/MainProject` directory, run **npm run setup** to install dependencies and run **npm run dev** to generate the bundle;
15+2. Open `NavigationApp` in DevEco Studio and run **Sync and Refresh Project**;
16+3. Click File > Project Structure > Signing Configs, log in and complete the signing;
17+4. Click **run** in the upper right corner to start the project.
9 18 
10-# Environment Setup19+> NOTE: The project uses the latest RNOH dependencies by default during installation. If you need to install a specific version, please refer to [RNOH Version Evolution Planning and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md) to get the version number.
11-1. In the `NavigationProject/MainProject` directory, run **npm run i** to install the dependency and run **npm run dev** to generate the bundle.20+>
12-2. In the `entry` directory, run **ohpm i @rnoh/react-native-openharmony** to install the dependency.21+> npm dependency installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
13-3. Check whether the `oh-modules` folder is generated in the `NavigationApp` and `entry` directories.22+>
14-4. Open `NavigationApp` in DevEco Studio and run **Sync and Refresh Project**.23+> ohpm dependency installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
15-5. Click File > Project Structure > Signing Configs, log in and complete the signing.24+ 
16-6. Click **run** in the upper right corner to start the project.25+## Preview
26+After successfully running the demo project, open the application as shown below:
27+![NativeReactNavSwitch Application Home Page](../../zh-cn//figures/NativeReactNavSwitch-首页.png)
28+ 
29+**Navigate to RN Page B**
30+Operation: Click the "Navigate to RN Page B" button on the home page to navigate to RN Page B.
31+Effect: As shown below
32+![NativeReactNavSwitch RN Page B](../../zh-cn//figures/NativeReactNavSwitch-RN页面B.png)
33+ 
34+**Navigate to Native Page C**
35+Operation: Click the "Navigate to Native Page C" button on RN Page B to navigate to Native Page C.
36+Effect: As shown below
37+![NativeReactNavSwitch Native Page C](../../zh-cn//figures/NativeReactNavSwitch-原生页面C.png)
38+ 
39+**Return to RN Page B**
40+Operation: Click the "Back to Previous Page" button on Native Page C or swipe back to return to RN Page B.
41+Effect: As shown below
42+![NativeReactNavSwitch RN Page B](../../zh-cn//figures/NativeReactNavSwitch-RN页面B.png)
43+ 
44+**Return to Native Page A**
45+Operation: Click the "Back to Previous Page" button on RN Page B or swipe back to return to Native Page A.
46+Effect: As shown below
47+![NativeReactNavSwitch Native Page A](../../zh-cn//figures/NativeReactNavSwitch-首页.png)
Mdocs/Samples/NativeReactNavSwitch/README_zh.md+18-12
@@ -1,22 +1,28 @@
1# 说明1# 说明
2-这是一个原生页面和RN页面相互跳转的demo工程。
3 2 
3+这是一个原生页面和RN页面相互跳转的demo工程
4 4 
5-# 目录结构5+## 目录结构
6-NavigationProject -- RN侧工程
7-NavigationApp -- 原生工程
8 6 
7+```md
8+NativeReactNavSwitch
9+├── NavigationProject -- RN侧工程
10+└── NavigationApp -- 原生工程
11+```
9 12 
10-# 环境搭建13+## 环境搭建
11-1. 在 `NavigationProject/MainProject` 目录下执行 **npm run i**或**yarn i** 安装依赖，执行 **npm run dev** 生成 bundle；14+1. 在 `NavigationProject/MainProject` 目录下执行 **npm run setup** 安装依赖，执行 **npm run dev** 生成 bundle；
12-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony** 安装依赖；15+2. 用 DevEco Studio 打开 `NavigationApp`，执行 **Sync and Refresh Project**；
13-3. 检查 `NavigationApp`、`entry` 目录下是否生成 `oh-modules` 文件夹；16+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
14-4. 用 DevEco Studio 打开 `NavigationApp`，执行 **Sync and Refresh Project**；17+4. 点击右上角的 **run** 启动项目。
15-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；
16-6. 点击右上角的 **run** 启动项目。
17 18 
19+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
20+>
21+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
22+>
23+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
18 24 
19-# 效果预览25+## 效果预览
20在成功运行demo工程之后，打开应用如下图所示： 26在成功运行demo工程之后，打开应用如下图所示：
21![NativeReactNavSwitch的应用首页](../../zh-cn//figures/NativeReactNavSwitch-首页.png)27![NativeReactNavSwitch的应用首页](../../zh-cn//figures/NativeReactNavSwitch-首页.png)
22 28 
Mdocs/Samples/RegisterFont/README.md+29-30
@@ -1,49 +1,48 @@
1-# README1+# Description
2 2 
3-这个项目包含了两个演示：一个演示原生侧注册字体的方法，另一个演示RN侧使用字体的效果。3+This project contains two demonstrations: one shows how to register fonts on the native side, and the other demonstrates the effect of using fonts on the RN side.
4 4 
5-# 目录结构5+## Directory Structure
6 6 
7```7```
8├── RegisterFontNativeProject8├── RegisterFontNativeProject
9| └── Index.ets9| └── Index.ets
10-| ├── fontResourceByFontFamily # OpenHarmony 侧注册字体的方法110+| ├── fontResourceByFontFamily # OpenHarmony font registration method 1
11-| └── rnInstance.registerFont # OpenHarmony 侧自定义注册字体的方法2，随时可以注册字体文件11+| └── rnInstance.registerFont # OpenHarmony custom font registration method 2, can register font files at any time
12└── RegisterFontRnProject12└── RegisterFontRnProject
13- └── example.tsx # React Native 侧展示使用字体的效果13+ └── example.tsx # React Native side demonstrates the effect of using fonts
14- 
15```14```
16 15 
17-# OpenHarmony 侧16+## OpenHarmony Side
18 17 
19-1. **fontResourceByFontFamily**: 常规注册字体方法，创建实例时注册18+1. **fontResourceByFontFamily**: Regular font registration method, register when creating instance
20-2. **rnInstance.registerFont**: 找到对应的rnInstance可随时注册字体19+2. **rnInstance.registerFont**: Find the corresponding rnInstance to register fonts at any time
21 20 
22-# React Native 侧21+## React Native Side
23 22 
24-1. **使用字体文件**: 使用 `example.tsx` 中的代码，直接使用OpenHarmony 侧注册的字体23+1. **Using Font Files**: Use the code in `example.tsx` to directly use fonts registered on the OpenHarmony side
25 24 
26-# 运行步骤25+## Environment Setup
27 26 
28-1. 在 `RegisterFontRnProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；27+1. In the `RegisterFontRnProject` directory, run **npm i** to install dependencies and run **npm run dev** to generate the bundle;
29-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；28+2. Open `RegisterFontNativeProject` in DevEco Studio and run **Sync and Refresh Project**;
30-3. 检查 `RegisterFontNativeProject`、`entry` 目录下是否生成 `oh-modules` 文件夹；29+3. Click File > Project Structure > Signing Configs, log in and complete the signing;
31-4. 用 DevEco Studio 打开 `RegisterFontNativeProject`，执行 **Sync and Refresh Project**；30+4. Click **run** in the upper right corner to start the project;
32-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；
33-6. 点击右上角的 **run** 启动项目；
34-7. 确保鸿蒙和 rn 侧依赖下载无缺，版本配套正常；
35-8. 打开生成的 app 来确认文件已正确加载。
36 31 
37-# 注意事项32+> NOTE: The project uses the latest RNOH dependencies by default during installation. If you need to install a specific version, please refer to [RNOH Version Evolution Planning and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md) to get the version number.
33+>
34+> npm dependency installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
35+>
36+> ohpm dependency installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
38 37 
39-- 确保 OpenHarmony 和 React Native 项目配置正确，以便文件可以在两个系统之间无缝传递与加载。38+## Notes
40-- 沙箱路径的使用和文件访问权限需要根据具体环境进行调整。
41 39 
42----40+- Ensure that OpenHarmony and React Native projects are configured correctly so that files can be seamlessly transferred and loaded between the two systems.
41+- The use of sandbox paths and file access permissions need to be adjusted according to the specific environment.
43 42 
44-# 效果预览43+## Preview
45-- 默认字体 44+- Default font
46-- 常规注册字体 45+- Regular registered font
47-- rnInstance.registerFont方法注册字体 46+- rnInstance.registerFont method registered font
48 47 
49-![注册字体运行效果图](../../zh-cn/figures/注册字体运行效果图.png)48+![Font registration effect screenshot](../../zh-cn/figures/注册字体运行效果图.png)
Adocs/Samples/RegisterFont/README_zh.md+48-0
@@ -0,0 +1,48 @@
1+# 说明
2+ 
3+这个项目包含了两个演示：一个演示原生侧注册字体的方法，另一个演示RN侧使用字体的效果。
4+ 
5+## 目录结构
6+ 
7+```
8+├── RegisterFontNativeProject
9+| └── Index.ets
10+| ├── fontResourceByFontFamily # OpenHarmony 侧注册字体的方法1
11+| └── rnInstance.registerFont # OpenHarmony 侧自定义注册字体的方法2，随时可以注册字体文件
12+└── RegisterFontRnProject
13+ └── example.tsx # React Native 侧展示使用字体的效果
14+```
15+ 
16+## OpenHarmony 侧
17+ 
18+1. **fontResourceByFontFamily**: 常规注册字体方法，创建实例时注册
19+2. **rnInstance.registerFont**: 找到对应的rnInstance可随时注册字体
20+ 
21+## React Native 侧
22+ 
23+1. **使用字体文件**: 使用 `example.tsx` 中的代码，直接使用OpenHarmony 侧注册的字体
24+ 
25+## 环境搭建
26+ 
27+1. 在 `RegisterFontRnProject` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
28+2. 用 DevEco Studio 打开 `RegisterFontNativeProject`，执行 **Sync and Refresh Project**；
29+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
30+4. 点击右上角的 **run** 启动项目；
31+ 
32+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
33+>
34+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
35+>
36+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
37+ 
38+## 注意事项
39+ 
40+- 确保 OpenHarmony 和 React Native 项目配置正确，以便文件可以在两个系统之间无缝传递与加载。
41+- 沙箱路径的使用和文件访问权限需要根据具体环境进行调整。
42+ 
43+## 效果预览
44+- 默认字体
45+- 常规注册字体
46+- rnInstance.registerFont方法注册字体
47+ 
48+![注册字体运行效果图](../../zh-cn/figures/注册字体运行效果图.png)
Mdocs/Samples/RegisterFont/RegisterFontNativeProject/entry/.gitignore+2-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/RegisterFont/RegisterFontNativeProject/entry/oh-package.json5+1-0文件内容审核中，请稍后刷新重试
Mdocs/Samples/RegisterFont/RegisterFontRnProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/RegisterFont/RegisterFontRnProject/package.json+6-3
@@ -12,10 +12,14 @@
12 },12 },
13 "dependencies": {13 "dependencies": {
14 "crypto-js": "^4.2.0",14 "crypto-js": "^4.2.0",
15- "react": "18.2.0",15+ "react": "18.3.1",
16- "react-native": "0.72.5"16+ "react-native": "0.77.1",
17+ "@react-native-oh/react-native-harmony": "^0.77.9"
17 },18 },
18 "devDependencies": {19 "devDependencies": {
20+ "@react-native-community/cli": "15.0.1",
21+ "@react-native/babel-preset": "0.77.1",
22+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
19 "@babel/core": "^7.20.0",23 "@babel/core": "^7.20.0",
20 "@babel/preset-env": "^7.20.0",24 "@babel/preset-env": "^7.20.0",
21 "@babel/runtime": "^7.20.0",25 "@babel/runtime": "^7.20.0",
@@ -27,7 +31,6 @@
27 "babel-jest": "^29.2.1",31 "babel-jest": "^29.2.1",
28 "eslint": "^8.19.0",32 "eslint": "^8.19.0",
29 "jest": "^29.2.1",33 "jest": "^29.2.1",
30- "metro-react-native-babel-preset": "0.76.8",
31 "prettier": "^2.4.1",34 "prettier": "^2.4.1",
32 "react-test-renderer": "18.2.0",35 "react-test-renderer": "18.2.0",
33 "typescript": "4.8.4"36 "typescript": "4.8.4"
Mdocs/Samples/RegisterFont/RegisterFontRnProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/RootTagSample/NativeProject/build-profile.json5+3-3
@@ -5,17 +5,17 @@
5 "name": "default",5 "name": "default",
6 "signingConfig": "default",6 "signingConfig": "default",
7 "compatibleSdkVersion": "5.0.1(13)",7 "compatibleSdkVersion": "5.0.1(13)",
8- "runtimeOS": "HarmonyOS",8+ "runtimeOS": "HarmonyOS"
9 }9 }
10 ],10 ],
11 "buildModeSet": [11 "buildModeSet": [
12 {12 {
13- "name": "debug",13+ "name": "debug"
14 },14 },
15 {15 {
16 "name": "release"16 "name": "release"
17 }17 }
18- ]18+ ],
19 },19 },
20 "modules": [20 "modules": [
21 {21 {
Mdocs/Samples/RootTagSample/NativeProject/entry/.gitignore+2-1
@@ -3,4 +3,5 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/src/main/resources/rawfile/bundle.harmony.js
Mdocs/Samples/RootTagSample/NativeProject/entry/oh-package.json5+1-0
@@ -7,5 +7,6 @@
7 "main": "",7 "main": "",
8 "version": "1.0.0",8 "version": "1.0.0",
9 "dependencies": {9 "dependencies": {
10+ "@rnoh/react-native-openharmony": "../../ReactProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
10 }11 }
11}12}
Mdocs/Samples/RootTagSample/README.md+23-9
@@ -1,8 +1,8 @@
1# Description1# Description
2-This is the demo project for obtaining RNInstance and RootTag corresponding to RNSurface.
3 2 
3+This is the demo project for obtaining RNInstance and RootTag corresponding to RNSurface. It demonstrates sending messages to a specific RNSurface (such as the flight ticket page in the demo) through the `RNInstance.emitDeviceEvent` method.
4 4 
5-# Directory Structure5+## Directory Structure
6 6 
7```md7```md
8RootTagSample8RootTagSample
@@ -11,11 +11,25 @@ RootTagSample
11└── README.md11└── README.md
12```12```
13 13 
14+## Environment Setup
15+1. In the `ReactProject` directory, run **npm i** to install dependencies and run **npm run dev** to generate the bundle;
16+2. Open `NativeProject` in DevEco Studio and run **Sync and Refresh Project**;
17+3. Click File > Project Structure > Signing Configs, log in and complete the signing;
18+4. Click **run** in the upper right corner to start the project.
14 19 
15-# Environment Setup20+> NOTE: The project uses the latest RNOH dependencies by default during installation. If you need to install a specific version, please refer to [RNOH Version Evolution Planning and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md) to get the version number.
16-1. In the `ReactProject` directory, run **npm i @react-native-oh/react-native-harmony@x.x.x** to install the dependency and run **npm run dev** to generate the bundle.21+>
17-2. In the `entry` directory, run **ohpm i @rnoh/react-native-openharmony@x.x.x** to install the dependency.22+> npm dependency installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
18-3. Check whether the `oh-modules` folder is generated in the `NativeProject` and `entry` directories.23+>
19-4. Open `NativeProject` in DevEco Studio and run **Sync and Refresh Project**.24+> ohpm dependency installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
20-5. Click File > Project Structure > Signing Configs, log in and complete the signing.25+ 
21-6. Click **run** in the upper right corner to start the project.26+## Preview
27+- Interface before RootTag message sending
28+ 
29+![RootTag running interface](../../zh-cn/figures/RootTag消息发送前.png)
30+ 
31+- RootTag message sending
32+Steps: Click `CLICK ME`
33+Effect:
34+ 
35+![RootTag running interface](../../zh-cn/figures/RootTag消息发送后.png)
Mdocs/Samples/RootTagSample/README_zh.md+15-10
@@ -1,8 +1,8 @@
1# 说明1# 说明
2+ 
2这是获取RNSurface对应RNInstance与rootTag的demo工程。展示了通过`RNInstance.emitDeviceEvent`方法向指定的RNSurface（如Demo中的机票页面）发送消息。3这是获取RNSurface对应RNInstance与rootTag的demo工程。展示了通过`RNInstance.emitDeviceEvent`方法向指定的RNSurface（如Demo中的机票页面）发送消息。
3 4 
4- 5+## 目录结构
5-# 目录结构
6 6 
7```md7```md
8RootTagSample8RootTagSample
@@ -11,16 +11,21 @@ RootTagSample
11└── README.md11└── README.md
12```12```
13 13 
14+## 环境搭建
14 15 
15-# 环境搭建16+1. 在 `ReactProject` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
16-1. 在 `ReactProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；17+2. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；
17-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；18+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
18-3. 检查 `NativeProject`、`entry` 目录下是否生成 `oh-modules` 文件夹；19+4. 点击右上角的 **run** 启动项目。
19-4. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；20+ 
20-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；21+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
21-6. 点击右上角的 **run** 启动项目。22+>
23+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
24+>
25+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
26+ 
27+## 效果预览
22 28 
23-# 效果预览
24- RootTag消息发送前界面图29- RootTag消息发送前界面图
25 30 
26![RootTag运行界面图](../../zh-cn/figures/RootTag消息发送前.png)31![RootTag运行界面图](../../zh-cn/figures/RootTag消息发送前.png)
Mdocs/Samples/RootTagSample/ReactProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/RootTagSample/ReactProject/package.json+6-3
@@ -10,10 +10,14 @@
10 "@gorhom/portal": "^1.0.14",10 "@gorhom/portal": "^1.0.14",
11 "crypto-js": "4.2.0",11 "crypto-js": "4.2.0",
12 "d3-scale-chromatic": "^3.0.0",12 "d3-scale-chromatic": "^3.0.0",
13- "react": "18.2.0",13+ "react": "18.3.1",
14- "react-native": "0.72.5"14+ "react-native": "0.77.1",
15+ "@react-native-oh/react-native-harmony": "^0.77.9"
15 },16 },
16 "devDependencies": {17 "devDependencies": {
18+ "@react-native-community/cli": "15.0.1",
19+ "@react-native/babel-preset": "0.77.1",
20+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
17 "@babel/core": "^7.20.0",21 "@babel/core": "^7.20.0",
18 "@babel/preset-env": "^7.20.0",22 "@babel/preset-env": "^7.20.0",
19 "@babel/runtime": "^7.20.0",23 "@babel/runtime": "^7.20.0",
@@ -26,7 +30,6 @@
26 "babel-jest": "^29.2.1",30 "babel-jest": "^29.2.1",
27 "eslint": "^8.19.0",31 "eslint": "^8.19.0",
28 "jest": "^29.2.1",32 "jest": "^29.2.1",
29- "metro-react-native-babel-preset": "0.76.8",
30 "prettier": "^2.4.1",33 "prettier": "^2.4.1",
31 "react-test-renderer": "18.2.0",34 "react-test-renderer": "18.2.0",
32 "typescript": "4.8.4"35 "typescript": "4.8.4"
Mdocs/Samples/RootTagSample/ReactProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/Sample/README_zh.md+4-3
@@ -1,12 +1,13 @@
1-# 运行Sample工程1+# 说明
2 2 
3## 工程运行指导3## 工程运行指导
4 4 
5-​本Demo包含一个鸿蒙工程目录 `SampleApp`和一个ReactNative工程目录`SampleProject`，接下来需要使用`SampleProject`生成bundle包，并将bundle包加载到`SampleApp`中运行鸿蒙工程。5+​本Demo包含一个鸿蒙工程目录 `SampleApp` 和一个ReactNative工程目录 `SampleProject`，接下来需要使用 `SampleProject` 生成bundle包，并将bundle包加载到 `SampleApp` 中运行鸿蒙工程。
6 6 
7### React Native工程操作7### React Native工程操作
8+ 
81. 在 `SampleProject/MainProject` 目录下执行 **npm i** 安装依赖；91. 在 `SampleProject/MainProject` 目录下执行 **npm i** 安装依赖；
9-2. 运行 **npm run dev:all** 生成本地bundle。执行此命令后会在`SampleApp/entry/src/main/resources/rawfile`目录下生成名为`bundle`和`assets`文件夹；10+2. 运行 **npm run dev:all** 生成本地bundle。执行此命令后会在 `SampleApp/entry/src/main/resources/rawfile` 目录下生成名为 `bundle` 和 `assets` 文件夹；
103. 如果您想使用Metro服务进行热更新调试，请连接真机，执行以下命令：113. 如果您想使用Metro服务进行热更新调试，请连接真机，执行以下命令：
11 12
12 ```bash13 ```bash
Mdocs/Samples/Sample/SampleApp/entry/oh-package.json5+1-1
@@ -7,7 +7,7 @@
7 "main": "",7 "main": "",
8 "version": "1.0.0",8 "version": "1.0.0",
9 "dependencies": {9 "dependencies": {
10- "@rnoh/react-native-openharmony": "../SampleProject/MainProject/node_modules/@react-native-oh/react-native-harmony/harmony/react_native_openharmony.har",10+ "@rnoh/react-native-openharmony": "../SampleProject/MainProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har",
11 "@react-native-oh-tpl/react-native-pager-view": "file:../libs/pager_view.har"11 "@react-native-oh-tpl/react-native-pager-view": "file:../libs/pager_view.har"
12 }12 }
13}13}
Mdocs/Samples/Sample/SampleApp/oh-package.json5+1-1
@@ -13,6 +13,6 @@
13 "@ohos/axios": "^2.1.1"13 "@ohos/axios": "^2.1.1"
14 },14 },
15 "overrides": {15 "overrides": {
16- "@rnoh/react-native-openharmony": "../SampleProject/MainProject/node_modules/@react-native-oh/react-native-harmony/harmony/react_native_openharmony.har"16+ "@rnoh/react-native-openharmony": "../SampleProject/MainProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
17 }17 }
18}18}
Mdocs/Samples/Sandbox/README.md+16-14
@@ -1,8 +1,8 @@
1-### README1+# README
2 2 
3This project includes two demos. One demonstrates how to push raw files to the sandbox and load the files on OpenHarmony. The other demonstrates how to load images in the sandbox on the React Native side.3This project includes two demos. One demonstrates how to push raw files to the sandbox and load the files on OpenHarmony. The other demonstrates how to load images in the sandbox on the React Native side.
4 4 
5-#### Directory Structure5+## Directory Structure
6 6 
7```7```
8├── SandBoxNativeProject8├── SandBoxNativeProject
@@ -14,29 +14,31 @@ This project includes two demos. One demonstrates how to push raw files to the s
14 14 
15```15```
16 16 
17-#### On OpenHarmony17+## On OpenHarmony
18 18 
191. **Push files to the sandbox**: Use the **getRawFileContent** method of the `downloadBundle` function to push raw files to the sandbox for subsequent read operations.191. **Push files to the sandbox**: Use the **getRawFileContent** method of the `downloadBundle` function to push raw files to the sandbox for subsequent read operations.
202. **Load files**: Use the `new FileJSBundleProvider` class to load the files from the sandbox and verify the file content.202. **Load files**: Use the `new FileJSBundleProvider` class to load the files from the sandbox and verify the file content.
21 21 
22-#### On React Native22+## On React Native
23 23 
241. **Load images from the sandbox**: Use the code in `example.tsx` to load images from the OpenHarmony sandbox and display them in the React Native app.241. **Load images from the sandbox**: Use the code in `example.tsx` to load images from the OpenHarmony sandbox and display them in the React Native app.
25 25 
26-#### Procedure26+## Procedure
27 27 
28-1. In the `SandBoxRnProject` directory, run **npm i @react-native-oh/react-native-harmony@x.x.x** to install the dependency and run **npm run dev** to generate the bundle.28+1. In the `SandBoxRnProject` directory, run **npm i** to install the dependency and run **npm run dev** to generate the bundle.
29-2. In the `entry` directory, run **ohpm i @rnoh/react-native-openharmony@x.x.x** to install the dependency.29+2. Open `SandBoxNativeProject` in DevEco Studio and run **Sync and Refresh Project**.
30-3. Check whether the `oh-modules` folder is generated in the `SandBoxNativeProject` and `entry` directories.30+3. Click File > Project Structure > Signing Configs, log in and complete the signing.
31-4. Open `SandBoxNativeProject` in DevEco Studio and run **Sync and Refresh Project**.31+4. Click **run** in the upper right corner to start the project.
32-5. Click File > Project Structure > Signing Configs, log in and complete the signing.
33-6. Click **run** in the upper right corner to start the project.
34-7. Ensure that the dependency downloaded on the Harmony and RN sides is complete and the version mapping is normal.
35-8. Open the generated app and check whether the file is correctly loaded.
36 32 
37-#### Notes33+## Notes
38 34 
39- Ensure that the OpenHarmony and React Native projects are correctly configured so that files can be seamlessly transferred and loaded between the two systems.35- Ensure that the OpenHarmony and React Native projects are correctly configured so that files can be seamlessly transferred and loaded between the two systems.
40- The sandbox path usage and file access permission need to be adjusted based on the actual environment.36- The sandbox path usage and file access permission need to be adjusted based on the actual environment.
41 37 
42---38---
39+ 
40+## Effect Preview
41+ 
42+Push bundle to sandbox through code:
43+ 
44+![Sandbox loading effect screenshot](./screenshots/Screenshots.jpeg)
Mdocs/Samples/Sandbox/README_zh.md+12-16
@@ -1,8 +1,8 @@
1-# README1+# 说明
2 2 
3这个项目包含两个演示，一个演示如何在 OpenHarmony 侧将 raw 文件推送到沙箱并成功加载，另一个演示如何在 React Native 侧加载沙箱中的图片。3这个项目包含两个演示，一个演示如何在 OpenHarmony 侧将 raw 文件推送到沙箱并成功加载，另一个演示如何在 React Native 侧加载沙箱中的图片。
4 4 
5-# 目录结构5+## 目录结构
6 6 
7```7```
8├── SandBoxNativeProject8├── SandBoxNativeProject
@@ -14,34 +14,30 @@
14 14 
15```15```
16 16 
17-# OpenHarmony 侧17+## OpenHarmony 侧
18 18 
191. **将文件推送到沙箱**: 使用 `downloadBundle` 函数的 getRawFileContent 方法将 rwaFile 中的文件推送到沙箱，以便之后的读取操作。191. **将文件推送到沙箱**: 使用 `downloadBundle` 函数的 getRawFileContent 方法将 rwaFile 中的文件推送到沙箱，以便之后的读取操作。
202. **加载文件**: 使用 `new FileJSBundleProvider` 类从沙箱中加载文件并验证其内容。202. **加载文件**: 使用 `new FileJSBundleProvider` 类从沙箱中加载文件并验证其内容。
21 21 
22-# React Native 侧22+## React Native 侧
23 23 
241. **加载沙箱中的图片**: 使用 `example.tsx` 中的代码，从 OpenHarmony 沙箱中加载图片，并在 React Native 应用中显示。241. **加载沙箱中的图片**: 使用 `example.tsx` 中的代码，从 OpenHarmony 沙箱中加载图片，并在 React Native 应用中显示。
25 25 
26-# 运行步骤26+## 运行步骤
27 27 
28-1. 在 `SandBoxRnProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；28+1. 在 `SandBoxRnProject` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
29-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；29+2. 用 DevEco Studio 打开 `SandBoxNativeProject`，执行 **Sync and Refresh Project**；
30-3. 检查 `SandBoxNativeProject`、`entry` 目录下是否生成 `oh-modules` 文件夹；30+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
31-4. 用 DevEco Studio 打开 `SandBoxNativeProject`，执行 **Sync and Refresh Project**；31+4. 点击右上角的 **run** 启动项目；
32-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；
33-6. 点击右上角的 **run** 启动项目；
34-7. 确保鸿蒙和 rn 侧依赖下载无缺，版本配套正常；
35-8. 打开生成的 app 来确认文件已正确加载。
36 32 
37-# 注意事项33+## 注意事项
38 34 
39- 确保 OpenHarmony 和 React Native 项目配置正确，以便文件可以在两个系统之间无缝传递与加载。35- 确保 OpenHarmony 和 React Native 项目配置正确，以便文件可以在两个系统之间无缝传递与加载。
40- 沙箱路径的使用和文件访问权限需要根据具体环境进行调整。36- 沙箱路径的使用和文件访问权限需要根据具体环境进行调整。
41 37 
42---38---
43 39 
44-# 效果预览40+## 效果预览
45通过代码将bundle推送到沙箱：41通过代码将bundle推送到沙箱：
46 42 
47-![沙箱加载运行效果图](./screenshots/Screenshots.jpeg)43+![沙箱加载运行效果图](./screenshots/Screenshots.jpeg)
Mdocs/Samples/Sandbox/SandBoxNativeProject/entry/.gitignore+2-1
@@ -3,4 +3,5 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/src/main/resources/rawfile
Mdocs/Samples/Sandbox/SandBoxNativeProject/entry/oh-package.json5+1-0
@@ -7,5 +7,6 @@
7 "main": "",7 "main": "",
8 "version": "1.0.0",8 "version": "1.0.0",
9 "dependencies": {9 "dependencies": {
10+ "@rnoh/react-native-openharmony": "../../SandBoxRnProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
10 }11 }
11}12}
Mdocs/Samples/Sandbox/SandBoxRnProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/Sandbox/SandBoxRnProject/package.json+6-3
@@ -12,10 +12,14 @@
12 },12 },
13 "dependencies": {13 "dependencies": {
14 "crypto-js": "^4.2.0",14 "crypto-js": "^4.2.0",
15- "react": "18.2.0",15+ "react": "18.3.1",
16- "react-native": "0.72.5"16+ "react-native": "0.77.1",
17+ "@react-native-oh/react-native-harmony": "^0.77.9"
17 },18 },
18 "devDependencies": {19 "devDependencies": {
20+ "@react-native-community/cli": "15.0.1",
21+ "@react-native/babel-preset": "0.77.1",
22+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
19 "@babel/core": "^7.20.0",23 "@babel/core": "^7.20.0",
20 "@babel/preset-env": "^7.20.0",24 "@babel/preset-env": "^7.20.0",
21 "@babel/runtime": "^7.20.0",25 "@babel/runtime": "^7.20.0",
@@ -27,7 +31,6 @@
27 "babel-jest": "^29.2.1",31 "babel-jest": "^29.2.1",
28 "eslint": "^8.19.0",32 "eslint": "^8.19.0",
29 "jest": "^29.2.1",33 "jest": "^29.2.1",
30- "metro-react-native-babel-preset": "0.76.8",
31 "prettier": "^2.4.1",34 "prettier": "^2.4.1",
32 "react-test-renderer": "18.2.0",35 "react-test-renderer": "18.2.0",
33 "typescript": "4.8.4"36 "typescript": "4.8.4"
Mdocs/Samples/Sandbox/SandBoxRnProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/demo_without_rnAbility/NativeProject/entry/.gitignore+2-1
@@ -3,4 +3,5 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/src/main/resources/rawfile/bundle.harmony.js
Mdocs/Samples/demo_without_rnAbility/NativeProject/library/oh-package.json5+1-0
@@ -6,6 +6,7 @@
6 "author": "",6 "author": "",
7 "license": "Apache-2.0",7 "license": "Apache-2.0",
8 "dependencies": {8 "dependencies": {
9+ "@rnoh/react-native-openharmony": "../../RNProject/MainProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
9 },10 },
10 "devDependencies": {},11 "devDependencies": {},
11 "dynamicDependencies": {}12 "dynamicDependencies": {}
Mdocs/Samples/demo_without_rnAbility/README.md+32-12
@@ -1,17 +1,37 @@
1-# Description1+# README
2+ 
2This is a demo project that does not inherit the RNAbilty and switches from the native page to the RN page.3This is a demo project that does not inherit the RNAbilty and switches from the native page to the RN page.
3 4 
5+## Directory Structure
4 6 
5-# Directory Structure7+```shell
6-RNProject -- RN project 8+├── NativeProject -- Native project
7-NativeProject -- Native project9+└── RNProject -- RN project
10+```
11+ 
12+## Environment Setup
13+ 
14+1. In the `RNProject` directory, execute **npm i** to install dependencies, then execute **npm run dev** to generate the bundle;
15+2. Open `NativeProject` with DevEco Studio, execute **Sync and Refresh Project**;
16+3. Click File > Project Structure > Signing Configs, log in and complete the signing;
17+4. Click **run** in the upper right corner to start the project.
18+ 
19+> NOTE: By default, the project uses the latest RNOH dependency during installation. If you need to install a specific version, please refer to [RNOH Version Evolution Planning and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md) to get the version number.
20+>
21+> npm dependency installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
22+>
23+> ohpm dependency installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
24+ 
25+## Preview
26+ 
27+After successfully running the demo project, the application should be as shown below
28+![demo_without_rnAbility app homepage](../../zh-cn/figures/demoWithoutRNAbility-App首页.jpg)
29+ 
30+**Navigate to RN Page**
31+Click the "Open RN App" button in the middle of the homepage to jump to the RN page, the result should be as shown below
32+![demo_without_rnAbility RN page](../../zh-cn/figures/demoWithoutRNAbility-RN页面.jpg)
8 33 
9 34 
10-# Environment Setup35+## Notes
11-1. In the `entry` directory, run **ohpm i @rnoh/react-native-openharmony@x.x.x** to install the dependency.36+ 
12-2. Check whether the `oh-modules` folder is generated in the `NativeProject`, `entry`, and `library` directories.37+1. Actively call the `windowSizeChange` method to monitor screen size changes, call `this.rnInstancesCoordinator?.onWindowSizeChange` to set the correct screen size, otherwise there will be problems with abnormal font size.
13-3. Run **npm i @react-native-oh/react-native-harmony@x.x.x** in `RNProject/MainProject` to install the dependency.
14-4. Run **npm run dev** in `RNProject/MainProject` to generate the bundle.
15-4. Open `NativeProject` in DevEco Studio and run **Sync and Refresh Project**.
16-5. Click File > Project Structure > Signing Configs, log in and complete the signing.
17-6. Click **run** in the upper right corner to start the project.
Mdocs/Samples/demo_without_rnAbility/README_zh.md+22-16
@@ -1,32 +1,38 @@
1# 说明1# 说明
2+ 
2这是一个不继承RNAbilty，由原生页面跳转到RN页面的demo工程。3这是一个不继承RNAbilty，由原生页面跳转到RN页面的demo工程。
3 4 
5+## 目录结构
4 6 
5-# 目录结构7+```shell
6-RNProject -- RN侧工程 8+├── NativeProject -- 原生工程
7-NativeProject -- 原生工程9+└── RNProject -- RN 工程
10+```
8 11 
12+## 环境搭建
9 13 
10-# 环境搭建14+1. 在 `RNProject` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
11-1. 在 `library` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；15+2. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；
12-2. 执行完成后，检查是否在 `NativeProject`、`entry`、`library` 目录下生成 `oh-modules` 文件夹；16+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
13-3. 在 `RNProject/MainProject` 中执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖；17+4. 点击右上角的 **run** 启动项目。
14-4. 在 `RNProject/MainProject` 中执行 **npm run dev** 命令打包；18+ 
15-5. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；19+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
16-6. 点击 File > Project Structure > Signing Configs，登录并完成签名；20+>
17-7. 点击右上角的 **run** 启动项目。21+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
18- 22+>
23+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
24+ 
25+## 效果预览
19 26 
20-# 效果预览
21在成功运行demo工程之后，打开应用如下图所示：27在成功运行demo工程之后，打开应用如下图所示：
22-![demo_without_rnAbility的应用首页](../../zh-cn//figures/demoWithoutRNAbility-App首页.jpg)28+![demo_without_rnAbility的应用首页](../../zh-cn/figures/demoWithoutRNAbility-App首页.jpg)
23 29 
24**导航到RN页面**30**导航到RN页面**
25操作：点击首页中间的打开RN应用按钮，跳转到RN页面。31操作：点击首页中间的打开RN应用按钮，跳转到RN页面。
26效果：如下图所示32效果：如下图所示
27-![demo_without_rnAbility的RN页面](../../zh-cn//figures/demoWithoutRNAbility-RN页面.jpg)33+![demo_without_rnAbility的RN页面](../../zh-cn/figures/demoWithoutRNAbility-RN页面.jpg)
28 34 
29 35 
30-# 注意事项36+## 注意事项
31 37 
321. 主动调用`windowSizeChange`方法监听屏幕尺寸变化，调用`this.rnInstancesCoordinator?.onWindowSizeChange`设置正确的屏幕尺寸，否则会出现字体size不正常的问题。381. 主动调用`windowSizeChange`方法监听屏幕尺寸变化，调用`this.rnInstancesCoordinator?.onWindowSizeChange`设置正确的屏幕尺寸，否则会出现字体size不正常的问题。
Mdocs/Samples/demo_without_rnAbility/RNProject/MainProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/demo_without_rnAbility/RNProject/MainProject/package.json+6-2
@@ -13,10 +13,14 @@
13 "@gorhom/portal": "^1.0.14",13 "@gorhom/portal": "^1.0.14",
14 "crypto-js": "4.2.0",14 "crypto-js": "4.2.0",
15 "d3-scale-chromatic": "^3.0.0",15 "d3-scale-chromatic": "^3.0.0",
16- "react": "18.2.0",16+ "react": "18.3.1",
17- "react-native": "0.72.5"17+ "react-native": "0.77.1",
18+ "@react-native-oh/react-native-harmony": "^0.77.9"
18 },19 },
19 "devDependencies": {20 "devDependencies": {
21+ "@react-native-community/cli": "15.0.1",
22+ "@react-native/babel-preset": "0.77.1",
23+ "@react-native-oh/react-native-harmony-cli": "^0.77.9",
20 "@babel/core": "^7.20.0",24 "@babel/core": "^7.20.0",
21 "@babel/preset-env": "^7.20.0",25 "@babel/preset-env": "^7.20.0",
22 "@babel/runtime": "^7.20.0",26 "@babel/runtime": "^7.20.0",
Mdocs/Samples/demo_without_rnAbility/RNProject/MainProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/using_RNSurface/README.md+24-10
@@ -1,16 +1,30 @@
1# Description1# Description
2+ 
2This is a demo project using RNSurface.3This is a demo project using RNSurface.
3 4 
5+## Directory Structure
4 6 
5-# Directory Structure7+```md
6-SampleProject -- RN project 8+using_RNSurface
7-SampleApp -- Native project9+├── SampleProject RN project
10+└── SampleApp Native project
11+```
8 12 
13+## Environment Setup
9 14 
10-# Environment Setup15+1. In the `SampleProject/MainProject` directory, run **npm i** to install dependencies, then run **npm run dev** to generate the bundle;
11-1. In the `SampleProject/MainProject` directory, run **npm i @react-native-oh/react-native-harmony@x.x.x** to install the dependency and run **npm run dev** to generate the bundle.16+2. Open `SampleApp` in DevEco Studio and run **Sync and Refresh Project**;
12-2. In the `entry` directory, run **ohpm i @rnoh/react-native-openharmony@x.x.x** to install the dependency.17+3. Click File > Project Structure > Signing Configs, log in and complete the signing;
13-3. Check whether the `oh-modules` folder is generated in the `SampleApp` and `entry` directories.18+4. Click **run** in the upper right corner of DevEco Studio to start the project;
14-4. Open `SampleApp` in DevEco Studio and run **Sync and Refresh Project**.19+ 
15-5. Click File > Project Structure > Signing Configs, log in and complete the signing.20+> NOTE: The project uses the latest RNOH dependencies by default during installation. If you need to install a specific version, please refer to [RNOH Version Evolution Planning and Branch Strategy](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md) to get the version number.
16-6. Click **run** in the upper right corner to start the project.21+>
22+> npm dependency installation: `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
23+>
24+> ohpm dependency installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
25+ 
26+## Preview
27+ 
28+The page effect after startup is as follows:
29+ 
30+![using_RNSurface Interface](./screenshots/Screenshot.jpeg)
Mdocs/Samples/using_RNSurface/README_zh.md+19-9
@@ -1,20 +1,30 @@
1# 说明1# 说明
2-这是一个使用RNSurface的demo工程。2+ 
3+这是一个使用RNSurface的demo工程
3 4 
4## 目录结构5## 目录结构
5-SampleProject -- RN侧工程
6-SampleApp -- 原生工程
7 6 
7+```md
8+using_RNSurface
9+├── SampleProject RN侧工程
10+└── SampleApp 原生工程
11+```
8 12 
9## 环境搭建13## 环境搭建
10-1. 在 `SampleProject/MainProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；14+ 
11-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；15+1. 在 `SampleProject/MainProject` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
12-3. 检查 `SampleApp`、`entry` 目录下是否生成 `oh-modules` 文件夹；16+2. 用 DevEco Studio 打开 `SampleApp`，执行 **Sync and Refresh Project**；
13-4. 用 DevEco Studio 打开 `SampleApp`，执行 **Sync and Refresh Project**；17+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
14-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；18+4. 点击 DevEco Studio 右上角的 **run** 启动项目；
15-6. 点击右上角的 **run** 启动项目。19+ 
20+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
21+>
22+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
23+>
24+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
16 25 
17## 效果预览26## 效果预览
27+ 
18启动后页面效果如下：28启动后页面效果如下：
19 29 
20![using_RNSurface运行界面](./screenshots/Screenshot.jpeg)30![using_RNSurface运行界面](./screenshots/Screenshot.jpeg)
Mdocs/Samples/using_RNSurface/SampleApp/entry/.gitignore+2-1
@@ -3,4 +3,5 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/src/main/resources/rawfile
Mdocs/Samples/using_RNSurface/SampleApp/entry/oh-package.json5+1-0
@@ -7,5 +7,6 @@
7 "main": "",7 "main": "",
8 "version": "1.0.0",8 "version": "1.0.0",
9 "dependencies": {9 "dependencies": {
10+ "@rnoh/react-native-openharmony": "../../SampleProject/MainProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
10 }11 }
11}12}
Mdocs/Samples/using_RNSurface/SampleProject/MainProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/using_RNSurface/SampleProject/MainProject/package.json+6-3文件内容审核中，请稍后刷新重试
Mdocs/Samples/using_RNSurface/SampleProject/MainProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}
Mdocs/Samples/using_turboModule/README.md+37-11文件内容审核中，请稍后刷新重试
Mdocs/Samples/using_turboModule/README_zh.md+19-10
@@ -1,21 +1,30 @@
1# 说明1# 说明
2-这是一个使用TuboModule的demo工程。
3 2 
3+这是一个使用TurboModule的demo工程
4 4 
5## 目录结构5## 目录结构
6-SampleProject -- RN侧工程
7-SampleApp -- 原生工程
8 6 
7+```md
8+using_turboModule
9+├── SampleProject RN侧工程
10+└── SampleApp 原生工程
11+```
9 12 
10## 环境搭建13## 环境搭建
11-1. 在 `SampleProject/MainProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；14+ 
12-2. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；15+1. 在 `SampleProject/MainProject` 目录下执行 **npm i** 安装依赖，执行 **npm run dev** 生成 bundle；
13-3. 检查 `SampleApp`、`entry` 目录下是否生成 `oh-modules` 文件夹；16+2. 用 DevEco Studio 打开 `SampleApp`，执行 **Sync and Refresh Project**；
14-4. 用 DevEco Studio 打开 `SampleApp`，执行 **Sync and Refresh Project**；17+3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
15-5. 点击 File > Project Structure > Signing Configs，登录并完成签名；18+4. 点击 DevEco Studio 右上角的 **run** 启动项目；
16-6. 点击右上角的 **run** 启动项目。19+ 
20+> NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)获取版本号。
21+>
22+> npm依赖安装： `npm i @react-native-oh/react-native-harmony@0.77.xx` `npm i --save-dev @react-native-oh/react-native-harmony-cli@0.77.xx`
23+>
24+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
17 25 
18## 效果预览26## 效果预览
27+ 
19启动后页面效果如下：28启动后页面效果如下：
20 29 
21![using_turboModule运行界面](./screenshots/Screenshot.jpeg)30![using_turboModule运行界面](./screenshots/Screenshot.jpeg)
@@ -30,4 +39,4 @@ SampleApp -- 原生工程
301. 点击【•调用TurboModule2的checkPwd方法】按钮，手机界面上会有一个alert弹框，提示“checkPwd success!”；391. 点击【•调用TurboModule2的checkPwd方法】按钮，手机界面上会有一个alert弹框，提示“checkPwd success!”；
311. 点击【•调用WorkerTurboModule回调方法：】按钮，会有返回结果（... from native worker side）回填到按钮；401. 点击【•调用WorkerTurboModule回调方法：】按钮，会有返回结果（... from native worker side）回填到按钮；
321. 点击【•调用WorkerTurboModule异步回调方法：】按钮，会有返回结果（rejected on native worker side）回填到按钮；411. 点击【•调用WorkerTurboModule异步回调方法：】按钮，会有返回结果（rejected on native worker side）回填到按钮；
33-1. 点击【•在worker线程中调用原生console.log方法：】按钮，会在DevEco控制台打印日志（在Native的worker线程中打印日志）。42+1. 点击【•在worker线程中调用原生console.log方法：】按钮，会在DevEco控制台打印日志（在Native的worker线程中打印日志）。
Mdocs/Samples/using_turboModule/SampleApp/entry/.gitignore+2-1
@@ -3,4 +3,5 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/src/main/resources/rawfile/
Mdocs/Samples/using_turboModule/SampleApp/entry/oh-package.json5+1-0
@@ -7,5 +7,6 @@
7 "main": "",7 "main": "",
8 "version": "1.0.0",8 "version": "1.0.0",
9 "dependencies": {9 "dependencies": {
10+ "@rnoh/react-native-openharmony": "../../SampleProject/MainProject/node_modules/@react-native-oh/react-native-harmony/react_native_openharmony.har"
10 }11 }
11}12}
Mdocs/Samples/using_turboModule/SampleProject/MainProject/babel.config.js+1-1文件内容审核中，请稍后刷新重试
Mdocs/Samples/using_turboModule/SampleProject/MainProject/package.json+6-3文件内容审核中，请稍后刷新重试
Mdocs/Samples/using_turboModule/SampleProject/MainProject/tsconfig.json+1-1
@@ -1,3 +1,3 @@
1{1{
2- "extends": "@tsconfig/react-native/tsconfig.json"2+ "extends": "@react-native/typescript-config/tsconfig.json"
3}3}