懂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

编辑推荐精选

问小白

问小白

全能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 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数，生成高质量的语音。该项目适用于多种场景，如有声读物制作、智能语音助手开发等。

Trae

Trae

字节跳动发布的AI编程神器IDE

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

AI工具TraeAI IDE协作生产力转型热门
咔片PPT

咔片PPT

AI助力，做PPT更简单！

咔片是一款轻量化在线演示设计工具，借助 AI 技术，实现从内容生成到智能设计的一站式 PPT 制作服务。支持多种文档格式导入生成 PPT，提供海量模板、智能美化、素材替换等功能，适用于销售、教师、学生等各类人群，能高效制作出高品质 PPT，满足不同场景演示需求。

讯飞绘文

讯飞绘文

选题、配图、成文，一站式创作，让内容运营更高效

讯飞绘文，一个AI集成平台，支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容，加速品牌传播，提升内容营销效果。

热门AI辅助写作AI工具讯飞绘文内容运营AI创作个性化文章多平台分发AI助手
材料星

材料星

专业的AI公文写作平台，公文写作神器

AI 材料星，专业的 AI 公文写作辅助平台，为体制内工作人员提供高效的公文写作解决方案。拥有海量公文文库、9 大核心 AI 功能，支持 30 + 文稿类型生成，助力快速完成领导讲话、工作总结、述职报告等材料，提升办公效率，是体制打工人的得力写作神器。

openai-agents-python

openai-agents-python

OpenAI Agents SDK，助力开发者便捷使用 OpenAI 相关功能。

openai-agents-python 是 OpenAI 推出的一款强大 Python SDK，它为开发者提供了与 OpenAI 模型交互的高效工具，支持工具调用、结果处理、追踪等功能，涵盖多种应用场景，如研究助手、财务研究等，能显著提升开发效率，让开发者更轻松地利用 OpenAI 的技术优势。

下拉加载更多