例子

入门

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证书下,对于个人或者商业用途都是免费的

它不是必须项,但是十分感谢。没有面向用户而且保留源代码。

帮助

需要帮助?

遵循 github 上的快速入门指南,并运行起来。 请不要出于个人目的滥用 github issues。

发现 bug?

如果你找到 bug 了,请在你 报告issue.

之前阅读贡献指南一番。