懂AI
react-native-awesome-gallery

react-native-awesome-gallery

React Native照片画廊组件 支持缩放和手势交互

react-native-awesome-gallery是一个基于Reanimated v3和react-native-gesture-handler的React Native照片画廊组件。该组件支持图片缩放、双击缩放、iOS风格效果、RTL布局、自定义选项、横竖屏显示和无限列表等功能。它为iOS和Android平台提供流畅的用户体验，开发者可以方便地集成和自定义这个功能丰富的画廊组件，为应用程序增添专业的图片浏览功能。

React Native图片库Reanimated手势处理自定义Github开源项目
访问官网GitHub文档

npm 版本

支持

如果您喜欢使用 React Native Awesome Gallery 并想表达您的感谢，您可以通过为我买杯咖啡来支持这个项目。您的支持帮助我保持项目的活力并不断改进。每一点支持都很重要！

"给我买杯咖啡"

<div style="text-align: center;"> <h1 align="center">React Native Awesome Gallery</h1> <h3 align="center">由 Reanimated v3 和 react-native-gesture-handler 驱动的照片画廊</h3> </div> <table style='width:100%;'> <tr> <td><h4 align='center'>基本用法</h4></td> <td><h4 align='center'>带工具栏</h4></td> <td><h4 align='center'>循环</h4></td> </tr> <tr> <td><img width="100%" height="480" src="https://yellow-cdn.veclightyear.com/835a84d5/9045a80a-e4c5-487b-aa1d-1db3cdf67149.gif" alt="画廊基本用法"></td> <td><img width="100%" height="480" src="https://yellow-cdn.veclightyear.com/835a84d5/d2bfacb3-69c3-4d6b-91b1-aade2b41af66.gif" alt="带工具栏的画廊"></td> <td><img width="100%" height="480" src="https://yellow-cdn.veclightyear.com/835a84d5/8390b21e-69cf-4856-ad67-d7616f92c9d0.gif" alt="画廊循环"></td> </tr> </table>

支持的功能

  • 缩放
  • 双击缩放
  • 原生 iOS 体验（橡皮筋效果，平移手势衰减动画）
  • RTL 支持
  • 完全可自定义
  • 支持纵向和横向
  • 无限列表
  • 支持 iOS 和 Android

安装

注意： 从 v0.3.6 版本开始，需要使用 Reanimated v3

首先，您需要按照 Reanimated v3 和 react-native-gesture-handler 的安装说明进行操作

yarn add react-native-awesome-gallery

从 SDK 40 开始支持 Expo。更多信息请参阅这里

用法

查看 示例文件夹 以获取使用 Expo Image 的示例

import Gallery from 'react-native-awesome-gallery';

// ...

const images = ['https://image1', 'https://image2'];

return (
  <Gallery
    data={images}
    onIndexChange={(newIndex) => {
      console.log(newIndex);
    }}
  />
);

属性

属性描述类型默认值
data要渲染的项目数组T[]undefined
renderItem?可用于渲染自定义图像组件的回调函数，例如 FastImage。注意：图像加载后必须调用 setImageDimensions({width, height}) 参数(renderItemInfo: {item: T, index: number, setImageDimensions: Function}) => React.ReactElementundefined
keyExtractor?为项目提供唯一键的回调函数(item: T, index: number) => string or number从 Item 中获取 id 或 key 或 _id，否则将 Item 作为键
initialIndex?初始图像索引number0
onIndexChange?当活动项目的索引发生变化时调用(newIndex: number) => voidundefined
numToRender?画廊中同时渲染的项目数量number5
emptySpaceWidth?项目之间的空白宽度number30
doubleTapScale?双击时的图像缩放比例number3
doubleTapInterval?单击和双击事件之间的时间间隔（毫秒）number500
maxScale?用户可以通过手势设置的最大缩放比例number6
pinchEnabled?是否启用捏合手势booleantrue
swipeEnabled?是否启用平移手势booleantrue
doubleTapEnabled?是否启用双击booleantrue
disableTransitionOnScaledImage?当缩放比例 > 1 时禁用到下一个/上一个图像的过渡booleanfalse
hideAdjacentImagesOnScaledImage?当缩放比例 > 1 时隐藏下一个和上一个图像booleanfalse
disableVerticalSwipe?当缩放比例 == 1 时禁用垂直滑动booleanfalse
disableSwipeUp?当缩放比例 == 1 时禁用向上滑动booleanfalse
loop?允许用户无限滑动。当 data.length > 1 时有效booleanfalse
onScaleChange?当缩放比例发生变化时调用(scale: number) => voidundefined
onScaleChangeRange?显示调用 onScaleChange 的缩放比例范围{start: number, end: number}undefined
containerDimensions?包裹画廊的 View 的尺寸对象{width: number, height: number}useWindowDimensions() 钩子返回的值
style?容器样式ViewStyleundefined

事件

属性描述类型
onSwipeToClose()当用户向上/下滑动时触发Function
onTranslationYChange(translationY: number, shouldClose: boolean)'worklet'; 当用户垂直滑动关闭画廊时触发Worklet
onTap()当用户点击图像时触发Function
onDoubleTap(toScale: number)当用户双击图像时触发Function
onLongPress()当检测到长按时触发Function
onScaleStart(scale: number)当捏合手势开始时触发Function
onScaleEnd(scale: number)当捏合手势结束时触发。用例：当用户以 scale > maxScale 或 scale < 1 结束手势时添加触觉反馈Function
onPanStart()当平移手势开始时触发Function

方法

import Gallery, { GalleryRef } from 'react-native-awesome-gallery';

// ...

const ref = useRef<GalleryRef>(null);
属性描述类型
setIndex设置活动索引(newIndex: number, animated?: boolean) => void
reset重置缩放和平移(animated?: boolean) => void

许可证

MIT

编辑推荐精选

Keevx

Keevx

AI数字人视频创作平台

Keevx 一款开箱即用的AI数字人视频创作平台，广泛适用于电商广告、企业培训与社媒宣传，让全球企业与个人创作者无需拍摄剪辑，就能快速生成多语言、高质量的专业视频。

即梦AI

即梦AI

一站式AI创作平台

提供 AI 驱动的图片、视频生成及数字人等功能，助力创意创作

扣子-AI办公

扣子-AI办公

AI办公助手，复杂任务高效处理

AI办公助手，复杂任务高效处理。办公效率低？扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作，覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应，生活工作无缝切换，提升50%效率！

TRAE编程

TRAE编程

AI辅助编程，代码自动修复

Trae是一种自适应的集成开发环境（IDE），通过自动化和多元协作改变开发流程。利用Trae，团队能够更快速、精确地编写和部署代码，从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能，是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
蛙蛙写作

蛙蛙写作

AI小说写作助手，一站式润色、改写、扩写

蛙蛙写作—国内先进的AI写作平台，涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能，助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。

AI辅助写作AI工具蛙蛙写作AI写作工具学术助手办公助手营销助手AI助手
问小白

问小白

全能AI智能助手，随时解答生活与工作的多样问题

问小白，由元石科技研发的AI智能助手，快速准确地解答各种生活和工作问题，包括但不限于搜索、规划和社交互动，帮助用户在日常生活中提高效率，轻松管理个人事务。

热门AI助手AI对话AI工具聊天机器人
Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手，它拥有超精准的音频识别翻译能力，几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球，无论你是留学生、商务人士、韩剧美剧爱好者，还是出国游玩、多国会议、跨国追星等等，都可以满足你所有需要同传的场景需求，线上线下通用，扫除语言障碍，让全世界的语言交流不再有国界。

讯飞智文

讯飞智文

一键生成PPT和Word，让学习生活更轻松

讯飞智文是一个利用 AI 技术的项目，能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定，还是学生群体的职业生涯规划、实习避坑指南，亦或是活动策划、旅游攻略等内容，它都能提供支持，帮助用户精准表达，轻松呈现各种信息。

AI办公办公工具AI工具讯飞智文AI在线生成PPTAI撰写助手多语种文档生成AI自动配图热门
讯飞星火

讯飞星火

深度推理能力全新升级，全面对标OpenAI o1

科大讯飞的星火大模型，支持语言理解、知识问答和文本创作等多功能，适用于多种文件和业务场景，提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台，涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能，能为不同需求的用户提供便捷高效的帮助，助力用户轻松获取信息、解决问题，满足多样化使用场景。

热门AI开发模型训练AI工具讯飞星火大模型智能问答内容创作多语种支持智慧生活
Spark-TTS

Spark-TTS

一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型

Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目，由多个知名机构联合参与。该项目提供了高效的 LLM（大语言模型）驱动的语音合成方案，支持语音克隆和语音创建功能，可通过命令行界面（CLI）和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数，生成高质量的语音。该项目适用于多种场景，如有声读物制作、智能语音助手开发等。

下拉加载更多