react-photo-view

一款精致的 React 的图片预览组件

Demo: https://minjieliu.github.io/react-photo-view

特性

1. 支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小/平移、键盘导航/关闭、旋转、点击切换控件等
2. 打开/关闭缩放动画
3. 自适应图像适应
4. 长图模式
5. 支持桌面端（兼容 IE10+）/移动端
6. 轻量的体积
7. 高度的扩展性
8. 支持服务端渲染
9. 基于 typescript

开始使用

yarn add react-photo-view

基本:

import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
import 'react-photo-view/dist/index.css';

function ImageView() {
  return (
    <PhotoProvider>
      {photoImages.map((item, index) => (
        <PhotoConsumer key={index} src={item} intro={item}>
          <img src={item} alt="" />
        </PhotoConsumer>
      ))}
    </PhotoProvider>
  );
}

受控 PhotoSlider

function ImageView() {
  const [visible, setVisible] = React.useState(false);
  const [photoIndex, setPhotoIndex] = React.useState(0);

  return (
    <div>
      <Button onClick={() => setVisible(true)}>打开</Button>
      <PhotoSlider
        images={photoImages.map((item) => ({ src: item }))}
        visible={visible}
        onClose={() => setVisible(false)}
        index={photoIndex}
        onIndexChange={setPhotoIndex}
      />
    </div>
  );
}

API

PhotoProvider

| 名称 | 类型 | 必选 | 描述 | | :-------------- | :---------------------------------------------------------------------- | :--- | :------------------------- | | children | React.ReactNode | 是 | | | maskClosable | boolean | 否 | 背景可点击关闭，默认 true | | photoClosable | boolean | 否 | 图片点击可关闭，默认 false | | bannerVisible | boolean | 否 | 导航条 visible，默认 true | | introVisible | boolean | 否 | 简介 visible，默认 true | | overlayRender | (overlayProps) => React.ReactNode | 否 | 自定义渲染 | | toolbarRender | (overlayProps) => React.ReactNode | 否 | 工具栏渲染 | | className | string | 否 | className | | maskClassName | string | 否 | 遮罩 className | | viewClassName | string | 否 | 图片容器 className | | imageClassName | string | 否 | 图片 className | | loadingElement | JSX.Element | 否 | 自定义 loading | | brokenElement | JSX.Element | ((photoProps: brokenElementDataType) => JSX.Element) | 否 | 加载失败 Element | | onIndexChange | (index:number, state: PhotoProviderState) => void; | 否 | 索引改变回调 | | onVisibleChange | (visible: boolean, index: number, state: PhotoProviderState) => void; | 否 | 可见性更改回调 |

PhotoConsumer

| 名称 | 类型 | 必选 | 描述 | | :------- | :----------------- | :--- | :------- | | src | string | 是 | 图片地址 | | intro | React.ReactNode | 否 | 图片介绍 | | children | React.ReactElement | 否 | |

注意：若 PhotoConsumer 的 children 为自定义组件

1. 需要向外部参数暴露 React.HTMLAttributes
2. 展开/关闭动画精准位置则需要用 React.forwardRef 暴露内部 React.ReactHTMLElement 节点的 Ref

PhotoSlider

继承自 PhotoProvider。手动控制 react-photo-view 的展现与隐藏

| 名称 | 类型 | 必选 | 描述 | | :------------ | :------------ | :--- | :----------- | | images | dataType[] | 是 | 图片列表 | | index | number | 否 | 图片当前索引 | | visible | boolean | 是 | 可见 | | onClose | (evt) => void | 是 | 关闭事件 | | onIndexChange | Function | 否 | 索引改变回调 |

谁在使用