{"_id":"@bingtang-rn/react-native-animated-spinkit","_rev":"2-dad1866bab19fd5dbf0bf8af890dcd65","name":"@bingtang-rn/react-native-animated-spinkit","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bingtang-rn/react-native-animated-spinkit","version":"1.0.0","keywords":["react-native","harmony","harmonyos","react-native-animated-spinkit"],"license":"MIT","_id":"@bingtang-rn/react-native-animated-spinkit@1.0.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_animated_spinkit","dist":{"shasum":"c80c7971fc610d7c2f273cfd326cdb70f55c050a","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-animated-spinkit/-/react-native-animated-spinkit-1.0.0.tgz","fileCount":24,"integrity":"sha512-VR7CpHpgveK1MNEOZE0q+Zeh9v0HM1LCRuyymReDTN34/2zWU+BV4KMhxdmOP1buYhR3hnaLlTie2rcUlJ41vQ==","signatures":[{"sig":"MEYCIQDz8AW6jrBB+09DGeT/w1Q5MrlDw1XE54iEKPEpJPgPuwIhAIn4TGLfJs8DS6CTzMLE2+lhXUVNUBavsKBBa9Yg8uCA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44759},"main":"./src/index.ts","types":"./src/index.ts","module":"./src/index.ts","engines":{"node":">=18"},"gitHead":"f51d0d6598b111ea7c95bf359d2908a6a03f9363","harmony":{"alias":"react-native-animated-spinkit"},"private":false,"scripts":{},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_animated_spinkit","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_animated_spinkit组件。","directories":{},"_nodeVersion":"24.15.0","react-native":"./src/index.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","@types/react":"18.2.79","react-native":"0.72.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"tmp":"tmp/react-native-animated-spinkit_1.0.0_1785999767306_0.24665419898652519","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"_id":"@bingtang-rn/react-native-animated-spinkit@1.0.1","dist":{"shasum":"ddad06b07f2643f82b9cbe77db3c6c7709636b71","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-animated-spinkit/-/react-native-animated-spinkit-1.0.1.tgz","fileCount":24,"integrity":"sha512-Hv38Y0JHw+aR/axQIaXkUhbaHvlKRIwbgAjQ6ezAS0FisJlqyuk4lGIJkU3sbX6yXrjRhZJ8izWdUqHugbAHrQ==","signatures":[{"sig":"MEUCIQDId0GHFTJfvAEZwKzRYnsUjdZuVFce0BOei1K31vggZAIgYnszAfMfSOyhE3GxZulyHXS7bV4+HlJ3Gpw3YQSUIKE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICsGMzAgcPr/E0J/6Oed6WOB4cSZQ9EBVDaoRBdksSh5AiAs6QCcbEEbVSbe4WzRzkIWyfy4jtQtzy09M9kqrxnRuQ=="}],"unpackedSize":44815},"main":"./src/index.ts","name":"@bingtang-rn/react-native-animated-spinkit","_from":"file:bingtang-rn-react-native-animated-spinkit-1.0.1.tgz","types":"./src/index.ts","module":"./src/index.ts","engines":{"node":">=18"},"harmony":{"alias":"react-native-animated-spinkit"},"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_animated_spinkit","keywords":["react-native","harmony","harmonyos","react-native-animated-spinkit"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_animated_spinkit\\bingtang-rn-react-native-animated-spinkit-1.0.1.tgz","_integrity":"sha512-Hv38Y0JHw+aR/axQIaXkUhbaHvlKRIwbgAjQ6ezAS0FisJlqyuk4lGIJkU3sbX6yXrjRhZJ8izWdUqHugbAHrQ==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_animated_spinkit","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_animated_spinkit组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","react-native":"./src/index.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","@types/react":"18.2.79","react-native":"0.72.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-animated-spinkit_1.0.1_1790568578399_0.6281731171986265"}}},"time":{"created":"2026-08-06T07:02:47.156Z","modified":"2026-09-28T04:09:38.687Z","1.0.0":"2026-08-06T07:02:47.483Z","1.0.1":"2026-09-28T04:09:38.494Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_animated_spinkit","keywords":["react-native","harmony","harmonyos","react-native-animated-spinkit"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_animated_spinkit","type":"git"},"description":"适配鸿蒙版本，提供react_native_animated_spinkit组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-animated-spinkit for HarmonyOS\r\n\r\n本项目基于 [react-native-animated-spinkit](https://github.com/tienphaw/react-native-animated-spinkit) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_animated_spinkit/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 见发布记录 | 1.5.2 | 0.72+ | 否 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-animated-spinkit\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport { Plane, Chase, Bounce, Wave } from 'react-native-animated-spinkit'\r\n\r\n// 基本用法\r\n<Plane size={48} color=\"#000\" animating={true} hidesWhenStopped={true} />\r\n\r\n// 切换动画\r\n<Chase size={48} color=\"#FF6B6B\" animating={isAnimating} hidesWhenStopped={false} />\r\n```\r\n\r\n> import 时使用原库名 `'react-native-animated-spinkit'`，而非鸿蒙包名。\r\n\r\n**平台差异**：\r\n- 本库为纯 JS 实现（js-only），无需原生注册，通过 `harmony.alias` 由 Metro 重定向到鸿蒙化包。\r\n- `useNativeDriver` 在 HarmonyOS 上自动启用（`Platform.OS` 返回 `'harmony'`，不等于 `'web'`）。\r\n- `Fold` 组件中的 `renderToHardwareTextureAndroid` 属性为 Android 专有，HarmonyOS 端自动忽略，无功能影响。\r\n\r\n**权限要求**：\r\n- 无需任何权限声明。\r\n\r\n## Link\r\n\r\n| 版本 | 是否支持 Autolink |\r\n|------|------------------|\r\n| 当前版本 | 否 |\r\n\r\n本库为 js-only 模块，通过 Metro alias 重定向，不需要原生端注册 Package。如使用 Autolink 工程已接入，可跳过手动配置。\r\n\r\n<details>\r\n<summary>Manual Link 配置</summary>\r\n\r\n> **说明**：本模块为纯 JS 实现，无需在 C++ 侧和 ETS 侧注册 Package。只需确保 Metro 配置正确重定向即可。\r\n\r\n### 1. 配置 Metro\r\n\r\n在项目根目录 `metro.config.js` 中确保使用 `createHarmonyMetroConfig`：\r\n\r\n```js\r\nconst { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');\r\n\r\nmodule.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({\r\n  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',\r\n}), config);\r\n```\r\n\r\n### 2. 安装鸿蒙化包\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-animated-spinkit\r\n```\r\n\r\nohos/package.json 中已配置 `harmony.alias: \"react-native-animated-spinkit\"`，Metro 会自动将原包名 import 重定向到鸿蒙化包。\r\n\r\n</details>\r\n\r\n## 属性 / API\r\n\r\n| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |\r\n|-----|------|------|--------|----------------|\r\n| Plane | 3D 翻转 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Chase | 追逐旋转 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Bounce | 弹跳缩放 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Wave | 波浪 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Wander | 漫游 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Pulse | 脉冲 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Swing | 摆动 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Flow | 流动 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Circle | 圆环 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| CircleFade | 圆环淡入 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Grid | 网格 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| Fold | 折叠 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 |\r\n| size | Spinner 宽高尺寸 | number (默认 48) | — | ✅ 完全支持 |\r\n| color | Spinner 颜色 | string (默认 '#000') | — | ✅ 完全支持 |\r\n| animating | 是否播放动画 | boolean (默认 true) | — | ✅ 完全支持 |\r\n| hidesWhenStopped | 动画停止时是否隐藏 | boolean (默认 true) | — | ✅ 完全支持 |\r\n\r\n### 平台差异\r\n- `renderToHardwareTextureAndroid`（Fold 组件内）：Android 专有属性，HarmonyOS 端自动忽略\r\n\r\n### 未实现功能\r\n无\r\n\r\n### 使用限制\r\n- Plane 和 Fold 组件使用 3D 变换（perspective/rotateX/rotateY），依赖 RNOH 对 transform 3D 的支持\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本项目基于 [MIT License](https://github.com/tienphaw/react-native-animated-spinkit/blob/master/LICENSE)，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}