react-native-awesome-gallery

支持

如果您喜欢使用 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.ReactElement`	`undefined`
keyExtractor?	为项目提供唯一键的回调函数	`(item: T, index: number) => string or number`	从 `Item` 中获取 `id` 或 `key` 或 `_id`，否则将 `Item` 作为键
initialIndex?	初始图像索引	`number`	`0`
onIndexChange?	当活动项目的索引发生变化时调用	`(newIndex: number) => void`	`undefined`
numToRender?	画廊中同时渲染的项目数量	`number`	`5`
emptySpaceWidth?	项目之间的空白宽度	`number`	`30`
doubleTapScale?	双击时的图像缩放比例	`number`	`3`
doubleTapInterval?	单击和双击事件之间的时间间隔（毫秒）	`number`	`500`
maxScale?	用户可以通过手势设置的最大缩放比例	`number`	`6`
pinchEnabled?	是否启用捏合手势	`boolean`	`true`
swipeEnabled?	是否启用平移手势	`boolean`	`true`
doubleTapEnabled?	是否启用双击	`boolean`	`true`
disableTransitionOnScaledImage?	当缩放比例 > 1 时禁用到下一个/上一个图像的过渡	`boolean`	`false`
hideAdjacentImagesOnScaledImage?	当缩放比例 > 1 时隐藏下一个和上一个图像	`boolean`	`false`
disableVerticalSwipe?	当缩放比例 == 1 时禁用垂直滑动	`boolean`	`false`
disableSwipeUp?	当缩放比例 == 1 时禁用向上滑动	`boolean`	`false`
loop?	允许用户无限滑动。当 `data.length > 1` 时有效	`boolean`	`false`
onScaleChange?	当缩放比例发生变化时调用	`(scale: number) => void`	`undefined`
onScaleChangeRange?	显示调用 `onScaleChange` 的缩放比例范围	`{start: number, end: number}`	`undefined`
containerDimensions?	包裹画廊的 View 的尺寸对象	`{width: number, height: number}`	`useWindowDimensions()` 钩子返回的值
style?	容器样式	`ViewStyle`	`undefined`

事件

属性	描述	类型
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

支持

支持的功能

安装

用法

属性

事件

方法

许可证

编辑推荐精选

Vora

Refly.AI

酷表ChatExcel

TRAE编程

AIWritePaper论文写作

博思AIPPT

潮际好麦

iTerms

SimilarWeb流量提升

Sora2视频免费生成

探索AI的无限可能

推荐工具精选

TRAE编程

扣子-AI办公

商汤小浣熊

讯飞绘文

iTerms

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号