在前端开发过程中，经常需要用到图片展示的功能。而 paratissima-react-images 这个 npm 包的出现，给我们带来了更加方便的图片展示功能。本文将详细介绍和使用这个 npm 包，帮助读者快速掌握其使用方法和实践。
1. 安装
使用 npm 安装 paratissima-react-images：
npm install paratissima-react-images
2. 概述
paratissima-react-images 是一款基于 React 的图片展示组件，使用它可以在页面上方便的展示一组图片。该组件具备以下的特点：
- 支持图片预加载
- 支持缩放和拖动图片
- 支持响应式设计
在项目中的具体使用方式也十分简单：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ---------------------------
----- ------ - -
-
--------- ---------------------------------
---------- ---------------------------------
--
-
--------- ---------------------------------
---------- ---------------------------------
--
-
--------- ---------------------------------
---------- ---------------------------------
-------------- --- ---------
------------ ------ ----- ----- --- -------
--
--
----- ------- - -- -- -
----- ----------- ------------- - ----------------
----- --------------- ----------------- - ------------
----- --------- - ------- -- -
------------------------
-------------------
--
----- ---------- - -- -- -
--------------------
--
------ -
--
------- ----------- -- ------------------ ----- ----------
------- ----------- -- ------------------ ----- ----------
--------
---------------
----------------
--------------------------
--------------------------
--------------------
---------------------
----------------------
---------------------------
-----------------------
----------------------
------------------------
-------------------------
-------------------------------------------------
-----------------
----------------------
--------------------
--------------
---------------
---------------
-------------------
----------------------
----------------
---------------------------
-----------------
-----------------
---------------------
----------------------
------------------------
-----------
--
---
--
--3. 属性
下面是 paratissima-react-images 支持的属性：
images
必选属性，用来指定展示的图片列表。图片列表由多个对象组成，每个对象包含以下属性：
original(string) – 展示的图片路径thumbnail(string) – 缩略图路径originalTitle(string) – 图片的标题description(string) – 图片的描述
showIndex
类型：boolean，默认值：false。
如果设为 true，则在模态框中展示当前图片的序号和总数。
enableKeyboardInput
类型：boolean，默认值：true。
如果设为 false，则不能通过键盘控制图片的缩放和移动。
startIndex
类型：number，默认值：0。
从指定序号开始展示图片。
onClose
类型：function，默认值：undefined。
当用户关闭模态框时，调用此函数。
showThumbnails
类型：boolean，默认值：true。
如果设为 false，则不展示缩略图。
showPlayButton
类型：boolean，默认值：false。
如果设为 true，则在模态框中展示循环播放按钮。
showFullscreenButton
类型：boolean，默认值：false。
如果设为 true，则在模态框中展示全屏按钮。
disableSwipeDown
类型：boolean，默认值：false。
如果设为 true，则禁止向下拖动图片。
disableSwipeUp
类型：boolean，默认值：false。
如果设为 true，则禁止向上拖动图片。
disableArrowKeys
类型：boolean，默认值：false。
如果设为 true，则禁止通过方向键控制图片的缩放和移动。
disableRightClick
类型：boolean，默认值：false。
如果设为 true，则禁止通过鼠标右键控制图片的缩放和移动。
onErrorImageURL
类型：string，默认值：undefined。
如果图片无法加载，展示此 URL 下的图片。
getText
类型：function，默认值：undefined。
返回值必须是 Object 的一个子集，在模态框中展示。
tileViewportStyle
类型：Object，默认值：{}。
在模态框中展示的每个图片的 Viewport 样式。
tileDisplayDelay
类型：number，默认值：0。
展示之前的延迟时间 (以毫秒为单位)。
zoomStep
类型：number，默认值：0.2。
每次滚轮或触控缩放时缩放的乘数。
zoomSpeed
类型：number，默认值：300。
缩放速度 (以毫秒为单位)。
moveSpeed
类型：number，默认值：300。
移动速度 (以毫秒为单位)。
rotationSpeed
类型：number，默认值：300。
旋转速度 (以毫秒为单位)。
viewMode
类型：string，默认值：fit-contain。
展示模式：contain，cover 或 fit-contain 中的一种。
contain：图片应缩小到适合视口的大小。cover：图片应扩大到覆盖视口。fit-contain：如果图片小于视口，请缩放它以适应视口并使其保持比例。如果图片大于视口，请缩小它以适应视口并使其保持比例。
imageMargin
类型：number，默认值：10。
图像之间的间距（以像素为单位）。
backdropClosesModal
类型：boolean，默认值：false。
如果设为 true，则点击模态框背景将关闭模态框。
maxSpreadZoom
类型：number，默认值：2。
最大缩放级别。
minSpreadZoom
类型：number，默认值：1。
最小缩放级别。
preventScroll
类型：boolean，默认值：false。
如果设为 true，则防止滚动行为。
containerWidth
类型：string，默认值："100%"。
容器宽度。
containerHeight
类型：string，默认值："100%"。
容器高度。
id
类型：string，默认值：undefined。
自定义 id。
4. 示例代码
下面我们来看一下 paratissima-react-images 的运行示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ---------------------------
----- ------ - -
-
--------- -----------------------------------------
---------- -----------------------------------------
-------------- ------ ---
------------ ------ ----- ----- --- ----- ----------- ---------- -------
--
-
--------- -----------------------------------------
---------- -----------------------------------------
-------------- ------ ---
------------ -------- --------- ------- ------ --- -------- ----- ------------ -----
--
-
--------- -----------------------------------------
---------- -----------------------------------------
-------------- ------ ---
------------ -------- ----- ------ ----- --- --------- -- ------ -- -------- ---- --------- -----
--
-
--------- -----------------------------------------
---------- -----------------------------------------
-------------- ------ ---
------------ ------------- --- ----- --- -- ------- ------------
--
-
--------- -----------------------------------------
---------- -----------------------------------------
-------------- ------ ---
------------ ------- -------- ----- --- --- ---- -------- --- --------- -------
--
--
----- ------- - -- -- -
----- ----------- ------------- - ----------------
----- --------------- ----------------- - ------------
----- --------- - ------- -- -
------------------------
-------------------
--
----- ---------- - -- -- -
--------------------
--
----- ------- - -- ------------- ------ -- -- -
------ -
--------------- - --- --
----------- --------------- - ----- --- --------------------
---------------- ---------
---------------- ---------
----------------- ------------
------------------ -------------
------------------- --------------
-------------------- ----------------
--
--
------ -
--
------- ----------- -- ------------------ ----- ----------
------- ----------- -- ------------------ ----- ----------
------- ----------- -- ------------------ ----- ----------
------- ----------- -- ------------------ ----- ----------
------- ----------- -- ------------------ ----- ----------
--------
---------------
----------------
--------------------------
--------------------------
--------------------
---------------------
----------------------
---------------------------
-----------------------
----------------------
------------------------
-------------------------
-------------------------------------------------
-----------------
--------------------
----------- ---- --- -------------
------------ ------
------------ ----------
--
--------------------
--------------
----
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------