react-native-reanimated-carousel的API记录

核心属性

  1. data
    • 类型: Array<any>
    • 必填,轮播数据源,支持任意类型数据。
  2. renderItem

    • 类型: ({ item, index }) => React.ReactNode
    • 必填,自定义卡片渲染函数,参数包含当前项和索引。
  3. width/height

    • 类型: number
    • 控制轮播容器尺寸,默认填满父容器。
  4. loop

    • 类型: boolean
    • 是否启用无限循环滚动,默认true
  5. autoPlay

    • 类型: boolean
    • 是否自动轮播,默认false
  6. autoPlayInterval

    • 类型: number
    • 自动轮播间隔(毫秒),默认1000
  7. mode

    • 类型: 'parallax' | 'horizontal-stack' | 'vertical-stack'
    • 轮播动画模式:视差效果/水平堆叠/垂直堆叠。
  8. modeConfig

    • 类型: object
    • 配合mode的详细参数,如视差偏移量(parallaxScrollingOffset)、缩放比例(parallaxScrollingScale)等。
  9. pagingEnabled

    • 类型: boolean
    • 是否启用分页滚动(一页一卡),默认true
  10. snapEnabled

    • 类型: boolean
    • 是否启用吸附效果,滚动后自动对齐卡片,默认true

核心方法(通过Ref调用)

  1. next()

    • 手动切换到下一张卡片。
  2. prev()

    • 手动切换到上一张卡片。
  3. scrollTo(index: number, animated?: boolean)

    • 跳转到指定索引的卡片,支持动画控制。
  4. getCurrentIndex()

    • 返回当前卡片的索引。

回调事件

  1. onSnapToItem(index: number)

    • 卡片切换完成时触发,返回当前索引。
  2. onProgressChange(progress: number, absoluteProgress: number)

    • 滚动进度变化时触发,用于自定义动画。

性能优化属性

  1. windowSize

    • 类型: number
    • 预渲染卡片数量(默认1),优化长列表性能。
  2. overscrollEnabled

    • 类型: boolean
    • 是否允许边界弹性滚动,默认true

示例配置

<Carouselref={carouselRef}data={data}renderItem={renderItem}width={300}height={200}mode="parallax"modeConfig={{parallaxScrollingOffset: 50,parallaxScrollingScale: 0.9}}autoPlayautoPlayInterval={3000}onSnapToItem={(index) => console.log('当前索引:', index)}
/>

注意事项

  1. 依赖react-native-reanimated@:ml-citation{ref="2" data="citationList"}.0.0,需正确配置babel插件。
  2. 安卓需在MainActivity.java中启用Hermes引擎以获得最佳性能。
  3. 复杂动画建议结合useAnimatedStyle实现。

---------------------------------------------------------------------------------------------------------------

关于modeConfig的模式配置

1. 视差模式('parallax')

  • parallaxScrollingOffset
    类型: number
    视差滚动偏移量,控制相邻卡片的间距(默认值通常为 100
  • parallaxScrollingScale
    类型: number
    非中心卡片的缩放比例(默认 0.9,范围 0~1
  • parallaxAdjacentItemScale
    类型: number
    相邻卡片的额外缩放比例(可选,进一步细化层级效果)

2. 水平堆叠模式('horizontal-stack')

  • stackInterval
    类型: number
    堆叠卡片之间的重叠间距(默认 8
  • scaleInterval
    类型: number
    堆叠卡片的缩放递减梯度(默认 0.04
  • opacityInterval
    类型: number
    堆叠卡片的透明度递减梯度(默认 0.1

3. 垂直堆叠模式('vertical-stack')

  • stackInterval
    类型: number
    垂直方向的重叠间距(默认同水平模式)
  • translateYInterval
    类型: number
    垂直方向的位移偏移量(默认 20

通用配置

  • showLength
    类型: number
    可见区域显示的卡片数量(仅部分模式支持)
  • rotateZDeg
    类型: number
    卡片的 3D 旋转角度(单位:度,需结合自定义样式使用)

示例配置

modeConfig={{parallaxScrollingOffset: 50,  // 视差偏移parallaxScrollingScale: 0.85, // 非中心卡片缩放stackInterval: 10,            // 堆叠间距opacityInterval: 0.2          // 透明度渐变
}}

不同模式需搭配对应的 mode 属性生效,且部分参数仅对特定模式有效

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/95535.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/95535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TypeScript 泛型入门(新手友好、完整详解)

目标读者&#xff1a;刚学 TS 的前端开发者&#xff0c;或希望把泛型用到实际工程&#xff08;请求封装、组件复用&#xff09;中的同学。目录 为什么需要泛型&#xff08;直观动机&#xff09;基本语法与例子&#xff08;函数、接口、类&#xff09;泛型约束&#xff08;exten…

Linux ARP老化机制/探测机制/ip neigh使用

文章目录1. ARP状态机1.1 ARP状态类型1.2 状态转换图2. 超时时间与参数2.1 主要超时参数2.1.1 基础时间参数2.1.2 探测相关参数2.1.3 垃圾回收参数3. 主机发送ARP报文的时机3.1 发送数据包时发现ARP缓存中没有目标IP的MAC地址3.2 ARP条目进入STALE状态后需要发送数据3.3 定期维…

便携式显示器怎么选?:6大关键指标全解析

地铁通勤路上&#xff0c;程序员小陈掏出背包里的便携屏&#xff0c;连接手机即刻扩展出第二个工作窗口&#xff0c;赶在上班前修复了紧急bug&#xff1b;咖啡厅里&#xff0c;设计师阿琳用笔记本加便携屏的双屏组合&#xff0c;一边参看客户brief一边修改方案&#xff0c;效率…

以太坊网络

以太坊的网络和以太网是两个完全不同的概念&#xff0c;虽然它们的名称听起来相似&#xff0c;但它们属于不同的技术领域。以太坊网络&#xff08;Ethereum Network&#xff09;领域&#xff1a;区块链和加密货币定义&#xff1a;以太坊是一个开源区块链平台&#xff0c;支持智…

nano banana官方最强Prompt模板来了!六大场景模板详解

最近&#xff0c;相信大家的朋友圈和社交媒体都被一个叫nano banana的AI图像生成工具刷屏了。从精致的手办模型到名画人物穿越&#xff0c;再到中土世界场景还原&#xff0c;nano banana已然成为了最火爆的“整活工具之一。刚刚&#xff0c;谷歌为nano banana推出了官方Prompt模…

LeetCode 2825.循环增长使字符串子序列等于另一个字符串

给你一个下标从 0 开始的字符串 str1 和 str2 。 一次操作中&#xff0c;你选择 str1 中的若干下标。对于选中的每一个下标 i &#xff0c;你将 str1[i] 循环 递增&#xff0c;变成下一个字符。也就是说 ‘a’ 变成 ‘b’ &#xff0c;‘b’ 变成 ‘c’ &#xff0c;以此类推&a…

【无人机】1.编译betaflight和cleanflight的固件

在2023年&#xff0c;betaflight腾飞&#xff0c;而cleanflight已经结束更新&#xff0c;但是用cleanflight的原因是因为他最后版本支持stm32f103系列。不用betaflight因为手头还没有f405和f411&#xff0c;只有一个不支持的f407和f401&#xff0c;所以。。接下来开始步骤&…

刻意练习理论

刻意练习理论 一、理论概述 刻意练习&#xff08;Deliberate Practice&#xff09;是由心理学家安德斯艾利克森&#xff08;Anders Ericsson&#xff09;提出的一种系统化学习方法&#xff0c;核心观点是卓越并非源于天赋&#xff0c;而是通过针对性训练获得。其理论基础来自对…

【FastDDS】Layer DDS之Domain ( 04-DomainParticipantFactory)

Fast DDS 域参与者工厂&#xff08;DomainParticipantFactory&#xff09;详解 一、域参与者工厂&#xff08;DomainParticipantFactory&#xff09;基础定义 域参与者工厂&#xff08;DomainParticipantFactory&#xff09;的唯一作用是实现域参与者&#xff08;DomainPartici…

树莓集团建数字产业学院:产教融合强化成渝人才链与产业链衔接

成渝地区双城经济圈建设是国家重大发展战略&#xff0c;而人才链与产业链的有效衔接&#xff0c;是推动成渝地区产业高质量发展的关键。树莓集团顺应时代发展需求&#xff0c;搭建数字产业学院&#xff0c;以产教融合为纽带&#xff0c;不断强化成渝人才链与产业链的衔接&#…

在 ASP.NET 8 WebAPI 中使用不同的提供程序验证多个令牌(Token)及常见问题解答

介绍作为 ASP.NET 框架的最新版本&#xff0c;ASP.NET 8提供了强大的功能&#xff0c;可用于构建安全且可扩展的 Web API。API 开发的一个关键方面是身份验证&#xff0c;它确保只有授权用户或服务才能访问受保护的资源。在本文中&#xff0c;我们将探讨如何在 ASP.NET 8 API 中…

工业相机为啥丢包?黑条 / 撕裂的原因 + 解决办法,一看就懂

工业相机为啥丢包&#xff1f;黑条/撕裂的原因解决办法&#xff0c;一看就懂 工业相机拍图时出现黑条、撕裂、花屏&#xff0c;别急着换设备——大概率是“数据丢包”在搞鬼。尤其是高频率、高分辨率采图时&#xff0c;数据传输稍出问题&#xff0c;图像就会出故障。今天用“快…

【IQA技术专题】NIQE代码讲解

本文是对NIQE图像质量评价指标的代码解读&#xff0c;原文解读请看NIQE文章讲解。 本文的代码来源于IQA-Pytorch工程。 1、原文概要 NIQE实现了无参考的图像质量评价指标&#xff0c;可以有效地对图像的感知&#xff08;Fidelity&#xff09;质量进行评估。本文提出了一种完全…

配置时钟分频与倍频

在STM32微控制器中&#xff0c;“配置时钟分频与倍频”是一个关键步骤&#xff0c;它允许开发者根据应用需求调整系统时钟的频率。以下是对这一概念的详细解释&#xff1a;时钟源与基础频率时钟源&#xff1a;STM32微控制器通常支持多种时钟源&#xff0c;如高速外部时钟&#…

【深度学习新浪潮】视觉大模型在预训练方面有哪些关键进展?

近年来,视觉大模型在预训练领域取得了多项突破性进展,涵盖架构设计、多模态融合、数据利用效率及训练策略等多个维度。以下结合2024-2025年最新研究成果,从技术创新和应用突破两方面展开分析: 一、架构创新:突破分辨率与模态限制 超高分辨率预训练 伯克利与英伟达提出的P…

Elasticsearch原理篇

Elasticsearch原理篇写在前面&#xff1a;用之于手&#xff0c;先明于心一、传统数据库的瓶颈&#xff1a;当数据量成为负担1. 千万级数据下的性能衰减2. 分页查询的“深水陷阱”3. 关联查询的扩展难题4. 全文检索能力薄弱二、Elasticsearch 的优势&#xff1a;为搜索而生的分布…

《我是如何用C语言写工控系统的漏洞和Bug》连载(1)内容大纲

第一部分&#xff1a;导论与基础 第1章 引言 1.1 工控系统的独特性和重要性 实时性、可靠性、长生命周期的要求与IT系统的差异&#xff1a;后果不再是信息泄露&#xff0c;而是物理世界的中断与破坏 1.2 为什么C语言依然是工控领域的主流&#xff1f; 性能、底层硬件操作、历史…

.Net程序员就业现状以及学习路线图(三)

一、.Net程序员就业现状分析 1. 市场需求与薪资水平 ‌市场需求两极分化‌&#xff1a;2025年数据显示&#xff0c;.Net开发岗位全国占比约0.009%&#xff0c;主要集中在深圳、上海等一线城市 2 3。高端岗位&#xff08;云原生/AI集成方向&#xff09;年薪可达36-60万&#xff…

云计算学习100天-第40天 -普罗米修斯1

目录 Prometheus 概述—— 安装prometheus 案例 环境说明 实验步骤 一、prometheus服务器配置时间同步 二、安装Prometheus服务器 配置文件说明 三、编写服务启动文件并启动服务 四、访问web页面 Prometheus 概述—— Prometheus是一个开源系统监控和警报工具包&a…

高效文本处理:cut、sort、uniq 和 tr 命令详解与实战

前言 &#x1f52a; 一、cut —— 按列或字符截取 常用选项&#xff1a; 示例&#xff1a; &#x1f504; 二、sort —— 排序&#xff08;默认按行首字符升序&#xff09; 常用选项&#xff1a; 示例&#xff1a; &#x1f9fc; 三、uniq —— 去除连续重复行 常用选项…