入门
1. 依靠 yarn 来安装
yarn add react-images
… 或者 npm:
npm install react-images --save
2. JSX 使用案例:
<Viewer
imgs={[
{ src: '../images/photo-1.jpg' },
{ src: '../images/photo-2.jpg' }
]}
isOpen={this.state.isOpen}
onClickPrev={this.gotoPrevImg}
onClickNext={this.gotoNextImg}
onClose={this.closeImgsViewer}
/>
选项
| 属性名 | 类型 | 默认值 | 描述 |
| backdropCloseable | 布尔值 | false | 是否可以通过点击幕布退出查看 |
| currImg | 数值型 | 0 | 当前图片初始化索引 |
| customControls | 数组 | undefined | 照片查看器顶部控件的元素数组 |
| enableKeyboardInput | 布尔值 | true | 支持键盘输入 - 空格键，Esc, 左箭头，上箭头, and 右箭头，下箭头 |
| imgs | 数组 | undefined | 必须项。一个包含具备img 元素src，srcset 合法值的对象数组。 |
| imgCountSeparator | string | ' / ' | 图片计数器分隔符 |
| isOpen | 布尔值 | false | 图片查看器是否非法 |
| onClickPrev | func | undefined | 请求上一张图片时触发 |
| onClickNext | func | undefined | 请求下一张图片时触发 |
| onClickImg | func | undefined | 当前图片的点击事件处理器 |
| onClickThumbnail | func | undefined | 缩略图的点击事件处理器 |
| onClose | func | undefined | 必须项，照片查看器的关闭事件处理器 |
| preloadNextImg | 布尔值 | true | 是否预加载下一张图片 |
| preventScroll | 布尔值 | true | 自动滚动是否阻止 |
| showCloseBtn | 布尔值 | true | 是否在右上角显示 X 关闭按钮 |
| showImgCount | 布尔值 | true | 是否显示图片索引，比如“3 / 20” |
| showThumbnails | 布尔值 | false | 是否在查看器下方显示缩略图 |
| theme | 对象 | undefined | 传递给每个组件的主题化样式； arrow键, container键，等等。 |
| width | 数值型 | 1024 | 轮播器的最大宽度，默认为1024px |
Imgs
| 属性名 | 类型 | 默认值 | 描述 |
| src | 字符串 | undefined | 必须项. 主图片路径 |
| srcset | arr | undefined | 可替代图片尺寸列表 |
| caption | 字符串 | undefined | 当前图片下显示，对于描述或者归属很有用。 |
| thumbnail | 字符串 | undefined | showThumbnails被设置成 true的话要显示的缩略图 |
许可证
React Images Viewer在 MIT证书下，对于个人或者商业用途都是免费的
。 它不是必须项，但是十分感谢。没有面向用户而且保留源代码。