说明

这是创建自定义Fabric组件（包括CAPI组件和ArkTS组件）的demo工程

目录结构

FabricComponentSample
├── ReactProject 前端工程
├── fabric-component-sample-package RN三方件（自定义Fabric组件）
├── NativeProject 鸿蒙工程
├── react-native-harmony RN鸿蒙化包
├── react-native-harmony-cli RN鸿蒙化手脚架
└── README.md

环境搭建

1. 在 fabric-component-sample-package 中运行 pnpm pack 进行打包；
2. 在 ReactProject 目录下执行 pnpm i 安装依赖,执行 pnpm dev 使用 codegen 进行代码生成，打包 bundle.harmony.js;
3. 用 DevEco Studio 打开 NativeProject，等待工程自动同步完成，(手动同步，执行 Sync and Refresh Project);
4. 点击 File > Project Structure > Signing Configs，登录并完成签名；
5. 点击 DevEco Studio 右上角的 run 启动项目；

NOTE: 安装时项目默认使用最新的RNOH依赖，如需安装特定版本请查阅RNOH版本演进规划和分支策略获取版本号。

npm依赖安装： npm i @react-native-oh/react-native-harmony@0.84.xx npm i --save-dev @react-native-oh/react-native-harmony-cli@0.84.xx

ohpm依赖安装：ohpm i @rnoh/react-native-openharmony@0.84.xx

效果预览

启动后页面效果如下：

1. 点击【点我滚到顶】按钮，弹窗会滚到顶部；
2. 弹窗会滚到顶部后向下拉，会根据滚动位置决定最终停留在中间还是回到顶部；
3. 点击【选项1/2/3】，选项右侧会显示选中状态；
4. 点击【确定】按钮，会在VSCode控制台打印对应选项的value，如：{"target": 14, "value": [1]}；
5. 点击【现在是单选】按钮，按钮文案会改成【现在是多选】，继续点击【选项1/2/3】，可以让多个选项切换到选中状态；
6. 点击【确定】按钮，会在VSCode控制台打印对应选项的value，如：{"target": 14, "value": [1,2]}；