React-gallery-viewer 是一个可以快速构建图片查看器的 React 组件库，其基于 React 和 react-image-gallery 组件库开发。本文将为大家详细介绍 react-gallery-viewer 的使用方法，并提供实用的示例代码和指导意义。
安装
使用 npm 安装 react-gallery-viewer。
npm install react-gallery-viewer
引入
在需要使用的文件中引入 react-gallery-viewer。
import GalleryViewer from 'react-gallery-viewer';
使用
react-gallery-viewer 以 JSON 格式、数组形式呈现图片集合，并赋予多项配置，如控制栏、容器类名、图片间间隔等。配置信息被传入组件时，组件将渲染出一个图片查看器。
基本用法
组件使用方法如下：
<GalleryViewer images={[ { original: 'https://picsum.photos/id/1018/1000/600/' }, { original: 'https://picsum.photos/id/1015/1000/600/' } ]} />上述代码将渲染两张图片，点击图片可轮播查看。
自定义参数
除了基本参数之外，react-gallery-viewer 还提供了其他可定制的参数，如下：
- thumbnailWidth, thumbnailHeight: 缩略图宽高
- showNav: 是否显示左右导航箭头
- showPlayButton: 是否显示播放/暂停按钮
- showFullscreenButton: 是否显示全屏按钮
- showThumbnails: 是否显示缩略图
<GalleryViewer images={images} thumbnailWidth="80" thumbnailHeight="80" showThumbnails={true} showPlayButton={true} showNav={true} showFullscreenButton={true} />异步请求图片数据
在实际应用中，为了减小图片加载的负担，可能需要通过异步请求数据的方式动态加载图片。下面是一个利用 axios 发送异步请求的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------
------ ------------- ---- -----------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------- --
--
-
------------------- -
------------------------------------------
-------------- -- -
----- ------ - ---------------------- -- --
--------- ------------------
---------- -----------------
----
--------------- ------ ---
---
-
-------- -
----- - ------ - - -----------
------ -
-----
-------------- --------------- --
------
--
-
-
------ ------- ----结语
以上为 react-gallery-viewer 的使用教程，希望能对您有所帮助。react-gallery-viewer 拥有简单易用、定制性强等特点，适合构建各种类型的图片查看器。通过本文提供的范例代码和指南，您将能更好地利用 react-gallery-viewer 构建出令人称羡的图片查看器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663081e8991b448e21df