{"_id":"@bingtang-rn/react-native-extended-stylesheet","_rev":"2-90ca7b3c32efe5949b749c58185ef8e9","name":"@bingtang-rn/react-native-extended-stylesheet","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bingtang-rn/react-native-extended-stylesheet","version":"1.0.0","keywords":["react-native","harmony","harmonyos","react-native-extended-stylesheet"],"license":"MIT","_id":"@bingtang-rn/react-native-extended-stylesheet@1.0.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_extended_stylesheet","dist":{"shasum":"9e3c941dc2cdb02ef3d5b60499e0338463d1cb68","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-extended-stylesheet/-/react-native-extended-stylesheet-1.0.0.tgz","fileCount":34,"integrity":"sha512-SWW1CDl4uT4/oAMojNPxjuUA6Z9l6EUvuYlAzhMN6zeAF5t8U/BtMdv99DKs5jZy7oojkyt+o1iviJ/IcKM0Dg==","signatures":[{"sig":"MEYCIQC8oHelf2xD2IEk5OHp1yVPQJXmgF4DxN7ASGsx8naeNAIhAIxOIcGxUpIBfEDP9gPER3ENx970EsA4a7geF6K1A15C","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69371},"main":"src/index.js","types":"types/index.d.ts","module":"src/index.js","engines":{"node":">=18"},"gitHead":"ac0a799a6b98b3365ad55b2445e50e59a5e70de8","harmony":{"alias":"react-native-extended-stylesheet"},"private":false,"scripts":{},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_extended_stylesheet","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_extended_stylesheet组件。","directories":{},"_nodeVersion":"24.15.0","dependencies":{"css-mediaquery":"^0.1.2","object-resolve-path":"^1.1.0"},"react-native":"src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"tmp":"tmp/react-native-extended-stylesheet_1.0.0_1785999701791_0.8719303406970071","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"_id":"@bingtang-rn/react-native-extended-stylesheet@1.0.1","dist":{"shasum":"5e602dc6ef2f2b28a9a94376dd54fbbaebe93545","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-extended-stylesheet/-/react-native-extended-stylesheet-1.0.1.tgz","fileCount":34,"integrity":"sha512-5V7RuY7IsbItLdQp7gcdatnd7Dk1grVoRBY7Rg9ZElg8h+LowoMId+JggZkF6eGOWoLV7Acc9hGXoVXD+zFyoA==","signatures":[{"sig":"MEUCIQDkWrQWiiwCOG9YwWMw+oIn+vAnA8WP3HBGoy9wkY236gIgDKMAgqNUg3YYvlSGmPIGcyXyUGUsIa4W12HsXW8RnWQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCtMgmkfzqcG2pjMaDYudN2buoAJ5foEboCskRCsIgJlAIgfh1hOeu8TmcqAaWHIfGxf24xOBwWLuoGBwsrnG0oYZI="}],"unpackedSize":69417},"main":"src/index.js","name":"@bingtang-rn/react-native-extended-stylesheet","_from":"file:bingtang-rn-react-native-extended-stylesheet-1.0.1.tgz","types":"types/index.d.ts","module":"src/index.js","engines":{"node":">=18"},"harmony":{"alias":"react-native-extended-stylesheet"},"license":"MIT","private":false,"scripts":{},"version":"1.0.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_extended_stylesheet","keywords":["react-native","harmony","harmonyos","react-native-extended-stylesheet"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_extended_stylesheet\\bingtang-rn-react-native-extended-stylesheet-1.0.1.tgz","_integrity":"sha512-5V7RuY7IsbItLdQp7gcdatnd7Dk1grVoRBY7Rg9ZElg8h+LowoMId+JggZkF6eGOWoLV7Acc9hGXoVXD+zFyoA==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_extended_stylesheet","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_extended_stylesheet组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","dependencies":{"css-mediaquery":"^0.1.2","object-resolve-path":"^1.1.0"},"react-native":"src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-extended-stylesheet_1.0.1_1790569009488_0.8702297051521102"}}},"time":{"created":"2026-08-06T07:01:41.590Z","modified":"2026-09-28T04:16:49.745Z","1.0.0":"2026-08-06T07:01:42.002Z","1.0.1":"2026-09-28T04:16:49.570Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_extended_stylesheet","keywords":["react-native","harmony","harmonyos","react-native-extended-stylesheet"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_extended_stylesheet","type":"git"},"description":"适配鸿蒙版本，提供react_native_extended_stylesheet组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-extended-stylesheet for HarmonyOS\r\n\r\n本项目基于 [react-native-extended-stylesheet](https://github.com/vitalets/react-native-extended-stylesheet) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_extended_stylesheet/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 见发布记录 | 0.12.0 | 0.72+ | 是/否 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-extended-stylesheet\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport EStyleSheet from 'react-native-extended-stylesheet';\r\n\r\n// 1. 注册样式表（含 $var / rem / percent / operation / @media / 下划线样式）\r\nconst styles = EStyleSheet.create({\r\n $accent: '#007aff', // 局部变量\r\n card: {\r\n backgroundColor: '$cardBg', // 全局变量引用\r\n padding: '0.8rem', // rem 单位\r\n marginHorizontal: '4%', // 百分比\r\n '@media harmony': { // 平台媒体查询（鸿蒙端命中）\r\n borderWidth: 2,\r\n borderColor: '$accent',\r\n },\r\n },\r\n title: {\r\n fontSize: '1.2rem',\r\n color: '$textColor',\r\n '@media (max-width: 350)': { fontSize: '1rem' },\r\n '@media (min-width: 500)': { fontSize: '1.4rem' },\r\n },\r\n _underscored: { // 下划线样式保留计算后原始值，可读 styles._underscored.fontSize\r\n fontSize: '1.5rem',\r\n color: '$accent',\r\n },\r\n});\r\n\r\n// 2. 设置全局变量并计算所有样式表，触发 'build' 事件\r\nEStyleSheet.build({\r\n $theme: 'light',\r\n $textColor: '#1a1a1a',\r\n $cardBg: '#ffffff',\r\n $rem: 16,\r\n $scale: 1,\r\n});\r\n\r\n// 3. 单值即时计算\r\nconst halfWidth = EStyleSheet.value('0.5 * 100%', 'width');\r\nconst accent = EStyleSheet.value('$accent');\r\nconst remPx = EStyleSheet.value('1.5rem');\r\n\r\n// 4. 伪类（first / even / odd / last）\r\n\r\n\r\n// 5. 订阅 build 事件\r\nEStyleSheet.subscribe('build', () => { /* 主题切换后刷新 */ });\r\nEStyleSheet.unsubscribe('build', listener);\r\n\r\n// 6. 清缓存（主题切换 / HMR）\r\nEStyleSheet.clearCache();\r\nEStyleSheet.build(darkTheme);\r\n\r\n// 7. 代理的 StyleSheet 静态属性（与 RN StyleSheet 等价）\r\nconst hairline = EStyleSheet.hairlineWidth;\r\nconst flatten = EStyleSheet.flatten;\r\n```\r\n\r\n> import 时使用原库名 `'react-native-extended-stylesheet'`，而非鸿蒙包名 `@bingtang-rn/react-native-extended-stylesheet`（由 `harmony.alias` 自动映射）。\r\n\r\n**平台差异**：\r\n\r\n- HarmonyOS 上 `Platform.OS` 返回 `'harmony'`；写 `@media harmony` 即可在鸿蒙端命中分支，`@media ios` / `@media android` 在鸿蒙不命中（预期行为）。\r\n- `setStyleAttributePreprocessor` 在新版 RN 已废弃，鸿蒙端可能为 `undefined`；库用 getter 读取，不抛错。\r\n\r\n**权限要求**：\r\n\r\n- 本库为纯 JS 实现，无任何运行时权限需求。\r\n\r\n## Link\r\n\r\n| 版本 | 是否支持 Autolink |\r\n|------|------------------|\r\n| 当前版本 | 是/否 |\r\n\r\n如使用版本支持 Autolink 且工程已接入，可跳过手动配置。\r\n\r\n\r\nManual Link 配置
\r\n\r\n> **说明**：本模块需要同时在 C++ 侧和 ETS 侧注册 Package。\r\n\r\n### 1. Overrides RN SDK\r\n\r\n在工程根目录 `oh-package.json5` 添加：\r\n\r\n```json\r\n{\r\n \"overrides\": {\r\n \"@rnoh/react-native-openharmony\": \"./react_native_openharmony\"\r\n }\r\n}\r\n```\r\n\r\n### 2. 引入原生端依赖\r\n\r\n打开 `entry/oh-package.json5`，添加：\r\n\r\n```json\r\n\"dependencies\": {\r\n \"@bingtang-rn/react-native-extended-stylesheet\": \"file:../../node_modules/@bingtang-rn/react-native-extended-stylesheet/harmony/extended_stylesheet.har\"\r\n}\r\n```\r\n\r\n执行 `ohpm install`。\r\n\r\n### 3. 配置 CMakeLists\r\n\r\n打开 `entry/src/main/cpp/CMakeLists.txt`，添加：\r\n\r\n```cmake\r\nset(OH_MODULES \"${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules\")\r\n\r\nadd_subdirectory(\"${OH_MODULES}/@bingtang-rn/react-native-extended-stylesheet/src/main/cpp\" ./extended_stylesheet)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC extended_stylesheet)\r\n```\r\n\r\n### 4. 注册 Package（C++ 侧）\r\n\r\n打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：\r\n\r\n```cpp\r\n#include \"ExtendedStylesheetPackage.h\"\r\n\r\nstd::vector> PackageProvider::getPackages(Package::Context ctx) {\r\n return {\r\n std::make_shared(ctx),\r\n };\r\n}\r\n```\r\n\r\n### 5. 注册 Package（ETS 侧）\r\n\r\n打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加：\r\n\r\n```typescript\r\nimport { ExtendedStylesheetPackage } from '@bingtang-rn/react-native-extended-stylesheet/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n return [\r\n new ExtendedStylesheetPackage(ctx),\r\n ];\r\n}\r\n```\r\n\r\n \r\n\r\n## 属性 / API\r\n\r\n| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |\r\n|-----|------|------|--------|----------------|\r\n| create(styles) | 创建扩展样式表，注册后立即计算 | styles: 对象（含 $var / rem / percent / operation / @media / 下划线样式） | 含原生 id + `_下划线` 计算值 + `$var` 局部变量的结果对象 | ✅ 完全支持 |\r\n| build(globalVars?) | 计算所有已注册样式表，设置全局变量/媒体查询，触发 build 事件 | rawGlobalVars?: 含 `$var` / `@media` 的对象 | void | ✅ 完全支持 |\r\n| value(expr, prop?) | 即时计算单个表达式 | expr: string \\| number \\| Function；prop?: string（percent 基准） | number \\| string \\| 原值 | ✅ 完全支持 |\r\n| child(styles, styleName, index, count) | 按 index/count 拼装伪类样式 | styles, styleName, index: number, count: number | 单 id 或 id 数组 | ✅ 完全支持 |\r\n| subscribe(event, listener) | 订阅事件（仅 'build'）；已 build 则立即回调一次 | event: 'build'，listener: Function | void | ✅ 完全支持 |\r\n| unsubscribe(event, listener) | 取消订阅 build 事件 | event: 'build'，listener: Function | void | ✅ 完全支持 |\r\n| clearCache() | 清除所有样式表缓存（主题切换/HMR 用） | 无 | void | ✅ 完全支持 |\r\n| flatten（代理） | 代理到 RN `StyleSheet.flatten` | ...styles: 数组 \\| 多参数 | 扁平样式对象 | ✅ 完全支持 |\r\n| hairlineWidth（代理） | 代理到 RN `StyleSheet.hairlineWidth` | 无 | number | ✅ 完全支持 |\r\n| absoluteFill（代理） | 代理到 RN `StyleSheet.absoluteFill` | 无 | 样式对象 | ✅ 完全支持 |\r\n| absoluteFillObject（代理） | 代理到 RN `StyleSheet.absoluteFillObject` | 无 | 样式对象 | ✅ 完全支持 |\r\n| setStyleAttributePreprocessor（代理） | 代理到 RN `StyleSheet.setStyleAttributePreprocessor` | — | — | ⚠️ 部分支持（新版 RN 已废弃，鸿蒙端可能为 `undefined`，库用 getter 读取不抛错） |\r\n\r\n### 平台差异\r\n\r\n- HarmonyOS 端 `Platform.OS === 'harmony'`：写 `@media harmony` 命中分支；`@media ios` / `@media android` 不命中（预期行为）。\r\n- `setStyleAttributePreprocessor` 在新版 RN 已废弃，鸿蒙端可能为 `undefined`。\r\n\r\n### 未实现功能\r\n\r\n无。本库为纯 JS，鸿蒙端源码逐字节与原库一致，所有公开方法均可用。\r\n\r\n### 使用限制\r\n\r\n- `percent.js` 在模块加载时一次性捕获 `Dimensions.get('window')` 宽高，不监听方向变化；横竖屏切换后百分比基准不更新（库已知限制，非鸿蒙特有）。\r\n- 库已标记 deprecated（原库 README deprecation notice），不再更新，但功能完整可用。\r\n\r\n## 快速验证（运行 Example）\r\n\r\n### 前置条件\r\n\r\n| 依赖 | 版本要求 |\r\n|------|----------|\r\n| Node.js | >= 18 |\r\n| DevEco Studio | 5.0+ / 6.0+ |\r\n| HarmonyOS SDK | API 17+ |\r\n\r\n### 运行步骤\r\n\r\n**1. 克隆仓库**\r\n\r\n```bash\r\ngit clone <仓库地址>\r\ncd <仓库目录>\r\n```\r\n\r\n**2. 安装依赖并构建**\r\n\r\n```bash\r\nnpm install --legacy-peer-deps\r\nnpm pack # 生成 tgz 包（会自动触发 prepare 构建 JS 产物）\r\n```\r\n\r\n**3. 进入 example 目录，安装依赖**\r\n\r\n```bash\r\ncd example\r\nnpm install --legacy-peer-deps\r\n```\r\n\r\n**4. 生成 JS Bundle**\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n产物：`harmony/entry/src/main/resources/rawfile/bundle.harmony.js`\r\n\r\n**5. 用 DevEco Studio 打开鸿蒙工程**\r\n\r\n- 打开 DevEco Studio\r\n- 选择 `example/harmony` 目录\r\n- 等待 Sync 完成\r\n\r\n**6. 编译并运行 HAP**\r\n\r\n在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。\r\n\r\n> **注意**：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。\r\n\r\n## 约束与限制\r\n\r\n### 兼容性\r\n\r\n- RNOH: 0.72+\r\n- HarmonyOS SDK: API 17+\r\n- DevEco Studio: 5.0+\r\n\r\n## 遗留问题\r\n\r\n无（或列出已知问题）\r\n\r\n## 开源协议\r\n\r\n本项目基于 [原始库协议](原始库 LICENSE 链接)，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}