Star448
517
代码
代码
Issues102
Pull Requests80
项目讨论
Wiki
分析
Star448
517
已合并
feat: upgrade multibundle sample to 77 #1174
linhandev创建于 2025年6月14日
feat: upgrade multibundle sample to 77 #1174
已合并
linhandev创建于 2025年6月14日
从linhandev/ohos_react_nativeupgrade-sample合入到CPF-RN/ohos_react_native0.77.1-rc.1-ohos
共 12 个文件变更+108-61
Mdocs/Samples/MutilBundleSample/FlightRN/build/moduleId.js+13-2
@@ -8,8 +8,19 @@
8const path = require('path');8const path = require('path');
9const fs = require('fs');9const fs = require('fs');
10const MD5 = require('crypto-js/md5');10const MD5 = require('crypto-js/md5');
11-const basicModuleIds = require('./map/basicModuleIds.json');11+ 
12-const businessModuleIds = require('./map/businessModuleIds.json');12+fs.mkdirSync(path.join(path.dirname(__filename), 'map'), { recursive: true });
13+ 
14+function getBundleIds(idFilePath) {
15+ idFilePath = path.resolve(__dirname, idFilePath);
16+ if (!fs.existsSync(idFilePath)) {
17+ return [];
18+ } else {
19+ return require(idFilePath);
20+ }
21+}
22+const basicModuleIds = getBundleIds('./map/basicModuleIds.json');
23+const businessModuleIds = getBundleIds('./map/businessModuleIds.json');
13 24 
14function getModuleId(projectRootPath, modulePath, bundleName) {25function getModuleId(projectRootPath, modulePath, bundleName) {
15 const pathRelative = modulePath.substr(projectRootPath.length + 1);26 const pathRelative = modulePath.substr(projectRootPath.length + 1);
Mdocs/Samples/MutilBundleSample/FlightRN/package.json+22-15
@@ -14,28 +14,35 @@
14 "dev:all": "npm run dev:basic && npm run dev:flight"14 "dev:all": "npm run dev:basic && npm run dev:flight"
15 },15 },
16 "dependencies": {16 "dependencies": {
17- "react": "18.2.0",17+ "@react-native-oh/react-native-harmony": "^0.77.0",
18- "react-native": "0.72.5"18+ "react": "18.3.1",
19+ "react-native": "0.77.1"
19 },20 },
20 "devDependencies": {21 "devDependencies": {
21- "crypto-js": "^4.2.0",22+ "@babel/core": "^7.25.2",
22- "@babel/core": "^7.20.0",23+ "@babel/preset-env": "^7.25.3",
23- "@babel/preset-env": "^7.20.0",24+ "@babel/runtime": "^7.25.0",
24- "@babel/runtime": "^7.20.0",25+ "@react-native-community/cli": "15.0.1",
25- "@react-native/eslint-config": "^0.72.2",26+ "@react-native-community/cli-platform-android": "15.0.1",
26- "@react-native/metro-config": "^0.72.11",27+ "@react-native-community/cli-platform-ios": "15.0.1",
28+ "@react-native-oh/react-native-harmony-cli": "^0.1.0",
29+ "@react-native/babel-preset": "0.77.1",
30+ "@react-native/eslint-config": "0.77.1",
31+ "@react-native/metro-config": "0.77.1",
32+ "@react-native/typescript-config": "0.77.1",
27 "@tsconfig/react-native": "^3.0.0",33 "@tsconfig/react-native": "^3.0.0",
28- "@types/react": "^18.0.24",34+ "@types/jest": "^29.5.13",
35+ "@types/react": "^18.2.6",
29 "@types/react-test-renderer": "^18.0.0",36 "@types/react-test-renderer": "^18.0.0",
30 "babel-jest": "^29.2.1",37 "babel-jest": "^29.2.1",
38+ "crypto-js": "^4.2.0",
31 "eslint": "^8.19.0",39 "eslint": "^8.19.0",
32- "jest": "^29.2.1",40+ "jest": "^29.6.3",
33- "metro-react-native-babel-preset": "0.76.8",41+ "prettier": "2.8.8",
34- "prettier": "^2.4.1",42+ "react-test-renderer": "18.3.1",
35- "react-test-renderer": "18.2.0",43+ "typescript": "5.0.4"
36- "typescript": "4.8.4"
37 },44 },
38 "engines": {45 "engines": {
39 "node": ">=16"46 "node": ">=16"
40 }47 }
41-}48+}
Mdocs/Samples/MutilBundleSample/HotelRN/build/moduleId.js+12-2
@@ -8,8 +8,18 @@
8const path = require('path');8const path = require('path');
9const fs = require('fs');9const fs = require('fs');
10const MD5 = require('crypto-js/md5');10const MD5 = require('crypto-js/md5');
11-const basicModuleIds = require('./map/basicModuleIds.json');11+ 
12-const businessModuleIds = require('./map/businessModuleIds.json');12+fs.mkdirSync(path.join(path.dirname(__filename), 'map'), { recursive: true });
13+function getBundleIds(idFilePath) {
14+ idFilePath = path.resolve(__dirname, idFilePath);
15+ if (!fs.existsSync(idFilePath)) {
16+ return [];
17+ } else {
18+ return require(idFilePath);
19+ }
20+}
21+const basicModuleIds = getBundleIds('./map/basicModuleIds.json');
22+const businessModuleIds = getBundleIds('./map/businessModuleIds.json');
13 23 
14function getModuleId(projectRootPath, modulePath, bundleName) {24function getModuleId(projectRootPath, modulePath, bundleName) {
15 const pathRelative = modulePath.substr(projectRootPath.length + 1);25 const pathRelative = modulePath.substr(projectRootPath.length + 1);
Mdocs/Samples/MutilBundleSample/HotelRN/package.json+23-16
@@ -14,26 +14,33 @@
14 "dev:all": "npm run dev:basic && npm run dev:hotel"14 "dev:all": "npm run dev:basic && npm run dev:hotel"
15 },15 },
16 "dependencies": {16 "dependencies": {
17- "react": "18.2.0",17+ "@react-native-oh/react-native-harmony": "^0.77.0",
18- "react-native": "0.72.5"18+ "react": "18.3.1",
19+ "react-native": "0.77.1"
19 },20 },
20 "devDependencies": {21 "devDependencies": {
21- "crypto-js": "^4.2.0",22+ "@babel/core": "^7.25.2",
22- "@babel/core": "^7.20.0",23+ "@babel/preset-env": "^7.25.3",
23- "@babel/preset-env": "^7.20.0",24+ "@babel/runtime": "^7.25.0",
24- "@babel/runtime": "^7.20.0",25+ "@react-native-community/cli": "15.0.1",
25- "@react-native/eslint-config": "^0.72.2",26+ "@react-native-community/cli-platform-android": "15.0.1",
26- "@react-native/metro-config": "^0.72.11",27+ "@react-native-community/cli-platform-ios": "15.0.1",
27- "@tsconfig/react-native": "^3.0.0",28+ "@react-native-oh/react-native-harmony-cli": "^0.1.0",
28- "@types/react": "^18.0.24",29+ "@react-native/babel-preset": "0.77.1",
30+ "@react-native/eslint-config": "0.77.1",
31+ "@react-native/metro-config": "0.77.1",
32+ "@react-native/typescript-config": "0.77.1",
33+ "@types/jest": "^29.5.13",
34+ "@types/react": "^18.2.6",
29 "@types/react-test-renderer": "^18.0.0",35 "@types/react-test-renderer": "^18.0.0",
30- "babel-jest": "^29.2.1",
31 "eslint": "^8.19.0",36 "eslint": "^8.19.0",
32- "jest": "^29.2.1",37+ "jest": "^29.6.3",
33- "metro-react-native-babel-preset": "0.76.8",38+ "prettier": "2.8.8",
34- "prettier": "^2.4.1",39+ "react-test-renderer": "18.3.1",
35- "react-test-renderer": "18.2.0",40+ "typescript": "5.0.4",
36- "typescript": "4.8.4"41+ "crypto-js": "^4.2.0",
42+ "@tsconfig/react-native": "^3.0.0",
43+ "babel-jest": "^29.2.1"
37 },44 },
38 "engines": {45 "engines": {
39 "node": ">=16"46 "node": ">=16"
Mdocs/Samples/MutilBundleSample/NativeProject/entry/.gitignore+3-1
@@ -3,4 +3,6 @@
3/.preview3/.preview
4/build4/build
5/.cxx5/.cxx
6-/.test6+/.test
7+/entry
8+rawfile
Mdocs/Samples/MutilBundleSample/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": "file:../../FlightRN/node_modules/@react-native-oh/react-native-harmony/harmony/react_native_openharmony.har"
10 }11 }
11}12}
Mdocs/Samples/MutilBundleSample/README.md+21-12
@@ -1,23 +1,32 @@
1# Description1# Description
2-This is a demo project with multiple JSBundles and RNInstances.
3 2 
3+A demo project with multiple JSBundles and RNInstances.
4 4 
5-# Directory Structure5+## Directory Structure
6 6 
7```md7```md
8MutilBundleSample8MutilBundleSample
9-├── FlightRN Flight front-end project9+├── FlightRN Frontend project for the flight module
10-├── HotelRN Hotel front-end project10+├── HotelRN Frontend project for the hotel module
11├── NativeProject OpenHarmony project11├── NativeProject OpenHarmony project
12└── README.md12└── README.md
13```13```
14 14 
15+## Usage
15 16 
16-# Environment Setup17+1. Run **npm i** in `FlightRN` to install dependencies and run **npm run dev:all** to generate JS bundle for this module.
17-1. Run **npm i @react-native-oh/react-native-harmony@x.x.x** in `FlightRN` to install the dependency and run **npm run dev:all** to generate the JS bundle of the flight.18+2. Run **npm i** in `HotelRN` to install dependencies and run **npm run dev:all** to generate JS bundle for this module.
18-2. Run **npm i @react-native-oh/react-native-harmony@x.x.x** in `HotelRN` to install the dependency and run **npm run dev:all** to generate the JS bundle of the hotel.19+3. In `NativeProject/entry` directory, run **ohpm i** to install dependencies.
19-3. In the `entry` directory, run **ohpm i @rnoh/react-native-openharmony@x.x.x** to install the dependency.20+4. Open `NativeProject` in DevEco Studio and run **Sync and Refresh Project**.
20-4. Check whether the `oh-modules` folder is generated in the `NativeProject` and `entry` directories.21+5. Click File > Project Structure > Signing Configs, log in and create signing config.
21-5. Open `NativeProject` in DevEco Studio and run **Sync and Refresh Project**.22+6. Click **run** in the upper right corner to start the project.
22-6. Click File > Project Structure > Signing Configs, log in and complete the signing.23+ 
23-7. Click **run** in the upper right corner to start the project.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+> 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+> ohpm dependencies installation: `ohpm i @rnoh/react-native-openharmony@0.77.xx`
27+ 
28+## Result
29+ 
30+| ![Screenshot_home](./screenshots/Screenshot_home.jpeg) | ![Screenshot_hotel](./screenshots/Screenshot_hotel.jpeg) | ![Screenshot_flight](./screenshots/Screenshot_flight.jpeg) |
31+| :----------------------------------------------------: | :------------------------------------------------------: | :--------------------------------------------------------: |
32+| Home Page | Hotel Page | Flight Page |
Mdocs/Samples/MutilBundleSample/README_zh.md+13-9
@@ -1,6 +1,6 @@
1# 说明1# 说明
2-这是一个多jsBundle和多rnInstance的demo工程。
3 2 
3+一个多jsBundle和多rnInstance的demo工程
4 4 
5## 目录结构5## 目录结构
6 6 
@@ -12,17 +12,21 @@ MutilBundleSample
12└── README.md12└── README.md
13```13```
14 14 
15+## 使用方法
15 16 
16-## 环境搭建17+1. 在 `FlightRN` 中运行 **npm i** 安装依赖，运行 **npm run dev:all** 生成机票的jsBundle。
17-1. 在 `FlightRN` 中运行 **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:all** 生成机票的jsBundle；18+2. 在 `HotelRN` 中运行 **npm i** 安装依赖，运行 **npm run dev:all** 生成酒店的jsBundle。
18-2. 在 `HotelRN` 中运行 **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:all** 生成酒店的jsBundle；19+3. 在 `NativeProject/entry` 目录下执行 **ohpm i** 安装依赖。
19-3. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；20+4. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**。
20-4. 检查 `NativeProject`、`entry` 目录下是否生成 `oh-modules` 文件夹；21+5. 点击 File > Project Structure > Signing Configs，登录并完成签名。
21-5. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；22+6. 点击右上角的 **run** 启动项目。
22-6. 点击 File > Project Structure > Signing Configs，登录并完成签名；23+ 
23-7. 点击右上角的 **run** 启动项目。24+> NOTE: 项目默认使用最新的RNOH依赖，如需安装特定版本请参考[RNOH版本演进规划和分支策略](https://gitcode.com/openharmony-sig/ohos_react_native/wiki/RNOH版本演进规划和分支策略.md)。
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+> ohpm依赖安装：`ohpm i @rnoh/react-native-openharmony@0.77.xx`
24 27 
25## 效果预览28## 效果预览
29+ 
26启动后页面效果如下：30启动后页面效果如下：
27 31 
28| ![Screenshot_home](./screenshots/Screenshot_home.jpeg) | ![Screenshot_hotel](./screenshots/Screenshot_hotel.jpeg) | ![Screenshot_flight](./screenshots/Screenshot_flight.jpeg) |32| ![Screenshot_home](./screenshots/Screenshot_home.jpeg) | ![Screenshot_hotel](./screenshots/Screenshot_hotel.jpeg) | ![Screenshot_flight](./screenshots/Screenshot_flight.jpeg) |