用户可快速在鸿蒙应用中实现图片或内容轮播功能。本项目为 react-native-looped-carousel 的鸿蒙适配版，支持自动播放、循环滑动、手势控制，提供页码、圆点、箭头等导航样式配置，纯 JS 组件无需原生注册。【此简介由AI生成】

当前项目代码仓暂无内容

@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' 分支