Star448
517
代码
代码
Issues111
Pull Requests88
项目讨论
Wiki
分析
Star448
517
已合并
upgrade 77 branch sample project #1055
linhandev创建于 2025年5月23日
upgrade 77 branch sample project #1055
已合并
linhandev创建于 2025年5月23日
从linhandev/ohos_react_nativeupgrade-sample合入到CPF-RN/ohos_react_native0.77.1-rc.1-ohos
共 15 个文件变更+57-53
Mdocs/Samples/Sample/README_zh.md+12-19
@@ -4,44 +4,37 @@
4 4 
5​本Demo包含一个鸿蒙工程目录 `SampleApp`和一个ReactNative工程目录`SampleProject`，接下来需要使用`SampleProject`生成bundle包，并将bundle包加载到`SampleApp`中运行鸿蒙工程。5​本Demo包含一个鸿蒙工程目录 `SampleApp`和一个ReactNative工程目录`SampleProject`，接下来需要使用`SampleProject`生成bundle包，并将bundle包加载到`SampleApp`中运行鸿蒙工程。
6 6 
7-**环境变量配置：**7+### React Native工程操作
8- 8+1. 在 `SampleProject/MainProject` 目录下执行 **npm i** 安装依赖；
9-​ SampleApp默认为CAPI版本，该版本需要设置`RNOH_C_API_ARCH`环境变量的值为`1`。如何设置环境变量，您可以参考[配置CAPI版本环境变量](..//../zh-cn/环境搭建.md#set_capi_path)。9+2. 运行 **npm run dev:all** 生成本地bundle。执行此命令后会在`SampleApp/entry/src/main/resources/rawfile`目录下生成名为`bundle`和`assets`文件夹；
10- 10+3. 如果您想使用Metro服务进行热更新调试，请连接真机，执行以下命令：
11-**React Native工程配置：**
12-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** 安装依赖；
13- 
14-2. 运行 **npm run dev:all** 生成本地bundle。执行此命令后会在`SampleApp/entry/src/main/resources/rawfile`目录下生成一个名为`bundle`和`assets`的文件夹；
15- 
16-3. 使用Metro生成bundle。如果您想使用Metro服务实时更新bundle，请连接真机，分别执行以下命令：
17 11
18 ```bash12 ```bash
19 hdc rport tcp:8081 tcp:808113 hdc rport tcp:8081 tcp:8081
20 npm run start14 npm run start
21 ```15 ```
22 16 
23-**鸿蒙工程配置：**17+### 鸿蒙工程操作
24 18 
25-1. 在 `entry/oh-package.json5` 和根目录下的 `oh-package.json5` 中指定 `react-native-openharmony` 的版本。19+1. 用 DevEco Studio 打开 `SampleApp` 执行 **Sync and Refresh Project**。
26-2. 用 DevEco Studio 打开 `SampleApp` 执行 **Sync and Refresh Project**。20+2. 点击右上角的 **run** 启动项目。
27-3. 点击右上角的 **run** 启动项目。
28 21 
29## 工程内容介绍22## 工程内容介绍
30 23 
31-​ 空工程的业务内容包括首页HomePage、商品Goods、测试用例test、商品详情Detail四个模块，由React Native侧实现。在鸿蒙侧，通过加载四个业务模块的bundle包创建对应的RNSurface，最后将RNSurface嵌入ArkUI的页面组件中完成鸿蒙侧的页面构建。24+​工程的业务内容包括首页HomePage、商品Goods、测试用例test、商品详情Detail四个模块，由React Native侧实现。在鸿蒙侧，通过加载四个业务模块的bundle包创建对应的RNSurface，最后将RNSurface嵌入ArkUI的页面组件中完成鸿蒙侧的页面构建。
32 25 
33- 首页：使用了三方库react-native-pager-view，实现了tabs分栏效果；26- 首页：使用了三方库react-native-pager-view，实现了tabs分栏效果；
34- 商品：顶部的滚动条组件由ArkUI实现自定义组件，在RN侧导入并渲染；底部提供了多个TurboModule方法的使用示例；27- 商品：顶部的滚动条组件由ArkUI实现自定义组件，在RN侧导入并渲染；底部提供了多个TurboModule方法的使用示例；
35- 测试用例：提供了多个常用的代码示例页面；28- 测试用例：提供了多个常用的代码示例页面；
36- 商品详情：同时使用了ArkUI组件和RN组件混合渲染，并在RN组件中使用了鸿蒙侧传递过来的数据进行样式和内容的渲染。(通过商品页面中的接口跳转到对应的商品详情中)29- 商品详情：同时使用了ArkUI组件和RN组件混合渲染，并在RN组件中使用了鸿蒙侧传递过来的数据进行样式和内容的渲染。(通过商品页面中的接口跳转到对应的商品详情中)
37 30
38-| 首页 | 商品 | 测试用例 | 商品详情 |31+| 首页 | 商品 | 测试用例 | 商品详情 |
39-| --- | --- | --- | ---|32+| ------------------------------------ | ------------------------------------ | -------------------------------------------- | -------------------------------------------- |
40-| ![首页](./figures/环境搭建-首页.png)| ![商品](./figures/环境搭建-商品.png) | ![测试用例](./figures/环境搭建-测试用例.png) | ![商品详情](./figures/环境搭建-商品详情.png) |33+| ![首页](./figures/环境搭建-首页.png) | ![商品](./figures/环境搭建-商品.png) | ![测试用例](./figures/环境搭建-测试用例.png) | ![商品详情](./figures/环境搭建-商品详情.png) |
41 34 
42### React Native工程内容结构35### React Native工程内容结构
43 36 
44-​ 空工程的React Native业务代码在`SampleProject/MainProject/src/bundles`目录下，包含`HomePage`、`Goods`、`Detail`、`basic`、`test`目录。37+​工程的React Native业务代码在`SampleProject/MainProject/src/bundles`目录下，包含`HomePage`、`Goods`、`Detail`、`basic`、`test`目录。
45 38 
46- **React Native组件代码：**39- **React Native组件代码：**
47 40
Mdocs/Samples/Sample/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/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": "X.X.X",10+ "@rnoh/react-native-openharmony": "^0.77.0",
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": "0.72.69"16+ "@rnoh/react-native-openharmony": "^0.77.0"
17 }17 }
18}18}
Mdocs/Samples/Sample/SampleProject/MainProject/.gitignore+4-1
@@ -1,3 +1,6 @@
1+# project specific
2+build/multibundle/map/*.json
3+ 
1# OSX4# OSX
2#5#
3.DS_Store6.DS_Store
@@ -65,4 +68,4 @@ yarn-error.log
65 68 
66# Real-time file generation69# Real-time file generation
67/package-lock.json70/package-lock.json
68-/harmony/entry/src/main/resources/rawfile/71+/harmony/entry/src/main/resources/rawfile/
Mdocs/Samples/Sample/SampleProject/MainProject/babel.config.js+1-1
@@ -6,5 +6,5 @@
6 */6 */
7 7 
8module.exports = {8module.exports = {
9- presets: ['module:metro-react-native-babel-preset'],9+ presets: ['module:@react-native/babel-preset'],
10};10};
Mdocs/Samples/Sample/SampleProject/MainProject/build/multibundle/moduleId.js+10-2
@@ -9,8 +9,16 @@ const pathSep = require('path').sep;
9const fs = require('fs');9const fs = require('fs');
10const SHA256 = require('crypto-js/sha256');10const SHA256 = require('crypto-js/sha256');
11 11 
12-const basicNameArray = require('./map/basicNameMap.json');12+function requireWithDefault(path, defaultValue = []) {
13-const homepageArray = require('./map/pageNameMap.json');13+ try {
14+ return require(path);
15+ } catch (e) {
16+ return defaultValue;
17+ }
18+}
19+ 
20+const basicNameArray = requireWithDefault('./map/basicNameMap.json');
21+const homepageArray = requireWithDefault('./map/pageNameMap.json');
14 22 
15function getModuleId(projectRootPath, modulePath, ...bundles) {23function getModuleId(projectRootPath, modulePath, ...bundles) {
16 let startIndex = modulePath.indexOf(projectRootPath);24 let startIndex = modulePath.indexOf(projectRootPath);
Mdocs/Samples/Sample/SampleProject/MainProject/package.json+25-24
@@ -17,39 +17,40 @@
17 "dev:all": "npm run dev:basic && npm run dev:homepage && npm run dev:goods && npm run dev:details && npm run dev:test && npm run dev:sandbox"17 "dev:all": "npm run dev:basic && npm run dev:homepage && npm run dev:goods && npm run dev:details && npm run dev:test && npm run dev:sandbox"
18 },18 },
19 "dependencies": {19 "dependencies": {
20+ "react": "18.3.1",
21+ "react-native": "0.77.1",
20 "crypto-js": "4.2.0",22 "crypto-js": "4.2.0",
21 "d3-scale-chromatic": "^3.0.0",23 "d3-scale-chromatic": "^3.0.0",
22- "react": "18.2.0",
23- "react-native": "0.72.5",
24 "react-native-pager-view": "file:./third_party/react-native-oh-tpl-react-native-pager-view-6.2.3-0.1.2.tgz",24 "react-native-pager-view": "file:./third_party/react-native-oh-tpl-react-native-pager-view-6.2.3-0.1.2.tgz",
25 "@rnoh/testerino": "file:./dependecies/rnoh-testerino-0.0.9.tgz",25 "@rnoh/testerino": "file:./dependecies/rnoh-testerino-0.0.9.tgz",
26- "@gorhom/portal": "^1.0.14"26+ "@gorhom/portal": "^1.0.14",
27+ "@react-native-oh/react-native-harmony": "^0.77.0"
27 },28 },
28 "devDependencies": {29 "devDependencies": {
29- "@babel/core": "^7.20.0",30+ "@babel/core": "^7.25.2",
30- "@babel/preset-env": "^7.20.0",31+ "@babel/preset-env": "^7.25.3",
31- "@babel/runtime": "^7.20.0",32+ "@babel/runtime": "^7.25.0",
32- "@types/d3-scale-chromatic": "^3.0.0",33+ "@react-native-community/cli": "15.0.1",
33- "@react-native/eslint-config": "^0.72.2",34+ "@react-native-community/cli-platform-android": "15.0.1",
34- "@react-native/metro-config": "^0.72.11",35+ "@react-native-community/cli-platform-ios": "15.0.1",
35- "@tsconfig/react-native": "^3.0.0",36+ "@react-native-oh/react-native-harmony-cli": "^0.77.0",
36- "@types/react": "^18.0.24",37+ "@react-native/babel-preset": "0.77.1",
38+ "@react-native/eslint-config": "0.77.1",
39+ "@react-native/metro-config": "0.77.1",
40+ "@react-native/typescript-config": "0.77.1",
41+ "@types/jest": "^29.5.13",
42+ "@types/react": "^18.2.6",
37 "@types/react-test-renderer": "^18.0.0",43 "@types/react-test-renderer": "^18.0.0",
38- "babel-jest": "^29.2.1",
39 "eslint": "^8.19.0",44 "eslint": "^8.19.0",
40- "jest": "^29.2.1",45+ "jest": "^29.6.3",
41- "metro-react-native-babel-preset": "0.76.8",46+ "prettier": "2.8.8",
42- "prettier": "^2.4.1",47+ "react-test-renderer": "18.3.1",
43- "react-test-renderer": "18.2.0",48+ "typescript": "5.0.4",
44- "typescript": "4.8.4"49+ "@types/d3-scale-chromatic": "^3.0.0",
45- },50+ "@tsconfig/react-native": "^3.0.0",
46- "overrides": {51+ "babel-jest": "^29.2.1"
47- "@react-native-community/cli": "11.3.6"
48- },
49- "resolutions": {
50- "@react-native-community/cli": "11.3.6"
51 },52 },
52 "engines": {53 "engines": {
53- "node": ">=16"54+ "node": ">=18"
54 }55 }
55}56}
Rdocs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonView.tsx→docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonView.ts+0-0
文件重命名但无更改。
Rdocs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeView.tsx→docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeView.ts+0-0
文件重命名但无更改。
Mdocs/Samples/Sample/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}