@bingtang-rn/react-native-animated-spinkit for HarmonyOS

本项目基于 react-native-animated-spinkit 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：issues。

版本对应关系

| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 | | ------------ | ---------- | ------------ | -------- | ------------- | | 见发布记录 | 1.5.2 | 0.72+ | 否 | API17+ |

安装

npm install @bingtang-rn/react-native-animated-spinkit

使用

import { Plane, Chase, Bounce, Wave } from 'react-native-animated-spinkit'

// 基本用法
<Plane size={48} color="#000" animating={true} hidesWhenStopped={true} />

// 切换动画
<Chase size={48} color="#FF6B6B" animating={isAnimating} hidesWhenStopped={false} />

import 时使用原库名 'react-native-animated-spinkit'，而非鸿蒙包名。

平台差异：

• 本库为纯 JS 实现（js-only），无需原生注册，通过 harmony.alias 由 Metro 重定向到鸿蒙化包。
• useNativeDriver 在 HarmonyOS 上自动启用（Platform.OS 返回 'harmony'，不等于 'web'）。
• Fold 组件中的 renderToHardwareTextureAndroid 属性为 Android 专有，HarmonyOS 端自动忽略，无功能影响。

权限要求：

• 无需任何权限声明。

Link

| 版本 | 是否支持 Autolink | |------|------------------| | 当前版本 | 否 |

本库为 js-only 模块，通过 Metro alias 重定向，不需要原生端注册 Package。如使用 Autolink 工程已接入，可跳过手动配置。

说明：本模块为纯 JS 实现，无需在 C++ 侧和 ETS 侧注册 Package。只需确保 Metro 配置正确重定向即可。

1. 配置 Metro

在项目根目录 metro.config.js 中确保使用 createHarmonyMetroConfig：

const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');

module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
}), config);

2. 安装鸿蒙化包

npm install @bingtang-rn/react-native-animated-spinkit

ohos/package.json 中已配置 harmony.alias: "react-native-animated-spinkit"，Metro 会自动将原包名 import 重定向到鸿蒙化包。

属性 / API

| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 | |-----|------|------|--------|----------------| | Plane | 3D 翻转 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Chase | 追逐旋转 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Bounce | 弹跳缩放 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Wave | 波浪 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Wander | 漫游 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Pulse | 脉冲 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Swing | 摆动 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Flow | 流动 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Circle | 圆环 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | CircleFade | 圆环淡入 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Grid | 网格 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | Fold | 折叠 Spinner | size, color, animating, hidesWhenStopped | — | ✅ 完全支持 | | size | Spinner 宽高尺寸 | number (默认 48) | — | ✅ 完全支持 | | color | Spinner 颜色 | string (默认 '#000') | — | ✅ 完全支持 | | animating | 是否播放动画 | boolean (默认 true) | — | ✅ 完全支持 | | hidesWhenStopped | 动画停止时是否隐藏 | boolean (默认 true) | — | ✅ 完全支持 |

平台差异

• renderToHardwareTextureAndroid（Fold 组件内）：Android 专有属性，HarmonyOS 端自动忽略

未实现功能

无

使用限制

• Plane 和 Fold 组件使用 3D 变换（perspective/rotateX/rotateY），依赖 RNOH 对 transform 3D 的支持

快速验证（运行 Example）

前置条件

| 依赖 | 版本要求 | |------|----------| | Node.js | >= 18 | | DevEco Studio | 5.0+ / 6.0+ | | HarmonyOS SDK | API 17+ |

运行步骤

1. 克隆仓库

git clone <仓库地址>
cd <仓库目录>

2. 安装依赖并构建

npm install --legacy-peer-deps
npm pack           # 生成 tgz 包（会自动触发 prepare 构建 JS 产物）

3. 进入 example 目录，安装依赖

cd example
npm install --legacy-peer-deps

4. 生成 JS Bundle

npm run dev

产物：harmony/entry/src/main/resources/rawfile/bundle.harmony.js

5. 用 DevEco Studio 打开鸿蒙工程

• 打开 DevEco Studio
• 选择 example/harmony 目录
• 等待 Sync 完成

6. 编译并运行 HAP

在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。

注意：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。

约束与限制

兼容性

• RNOH: 0.72+
• HarmonyOS SDK: API 17+
• DevEco Studio: 5.0+

遗留问题

无

开源协议

本项目基于 MIT License，详见 LICENSE 文件。