@bingtang-rn/react-native-looped-carousel for HarmonyOS

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

版本对应关系

| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 | | ------------ | ---------- | ------------ | -------- | ------------- | | 0.1.13 | 0.1.13 | 0.72+ | 否（js-only） | API17+ |

安装

npm install @bingtang-rn/react-native-looped-carousel

使用

import Carousel from 'react-native-looped-carousel';
import { View, Text, StyleSheet } from 'react-native';

// 基础用法
<Carousel autoplay={true} delay={4000} isLooped={true}>
  <View style={styles.page1}><Text>Page 1</Text></View>
  <View style={styles.page2}><Text>Page 2</Text></View>
  <View style={styles.page3}><Text>Page 3</Text></View>
</Carousel>

const styles = StyleSheet.create({
  page1: { backgroundColor: '#FF6B6B' },
  page2: { backgroundColor: '#4ECDC4' },
  page3: { backgroundColor: '#45B7D1' },
});

本库为纯 JS 组件（js-only），无需原生代码注册，通过 harmony.alias 自动重定向 import。

Link

| 版本 | 是否支持 Autolink | |------|------------------| | 当前版本 | 否（js-only，无需 Autolink） |

本模块为纯 JS 实现，不需要原生端注册 Package 或配置 CMakeLists。

属性 / API

| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 | |-----|------|------|--------|----------------| | children | 轮播页内容（必填） | ReactNode | - | ✅ | | autoplay | 是否自动播放 | boolean | - | ✅ | | delay | 自动播放间隔（毫秒） | number | - | ✅ | | currentPage | 初始页索引 | number | - | ✅ | | isLooped | 是否无限循环 | boolean | - | ✅ | | swipe | 是否允许手势滑动 | boolean | - | ✅ | | pageInfo | 是否显示页码信息 | boolean | - | ✅ | | pageInfoBackgroundColor | 页码背景色 | string | - | ✅ | | pageInfoTextStyle | 页码文本样式 | style | - | ✅ | | pageInfoTextSeparator | 页码分隔符 | string | - | ✅ | | pageInfoBottomContainerStyle | 页码底部容器样式 | style | - | ✅ | | bullets | 是否显示圆点导航 | boolean | - | ✅ | | bulletsContainerStyle | 圆点容器样式 | style | - | ✅ | | bulletStyle | 圆点样式 | style | - | ✅ | | chosenBulletStyle | 选中圆点样式 | style | - | ✅ | | arrows | 是否显示箭头导航 | boolean | - | ✅ | | arrowsContainerStyle | 箭头容器样式 | style | - | ✅ | | arrowStyle | 箭头样式 | style | - | ✅ | | leftArrowStyle | 左箭头样式 | style | - | ✅ | | rightArrowStyle | 右箭头样式 | style | - | ✅ | | leftArrowText | 左箭头文本 | string | - | ✅ | | rightArrowText | 右箭头文本 | string | - | ✅ | | onAnimateNextPage | 页面切换回调 | (page: number) => void | - | ✅ | | onPageBeingChanged | 滑动开始回调 | (page: number) => void | - | ✅ | | getCurrentPage() | 获取当前页索引 | - | number | ✅ | | animateToPage(page) | 动画跳转到指定页 | number | void | ✅ |

快速验证（运行 Example）

前置条件

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

运行步骤

1. 克隆仓库

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

2. 安装依赖并构建

cd ohos
npm install --legacy-peer-deps
npm pack

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 安装到设备/模拟器。

约束与限制

兼容性

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

适配说明

• ViewPropTypes 已替换为 PropTypes.oneOfType([PropTypes.object, PropTypes.array])（RN 0.72+ 已移除 ViewPropTypes）
• componentWillReceiveProps 已替换为 componentDidUpdate（废弃生命周期）
• Platform.OS === 'android' 已增加 || Platform.OS === 'harmony' 分支

遗留问题

无

开源协议

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