代码拉取完成，页面将自动刷新
同步操作将从 MinJieLiu/react-photo-view 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
一款精致的 React 的图片预览组件
Demo: https://minjieliu.github.io/react-photo-view
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>
);
}
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| 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 | 否 | 加载失败 Element |
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| src | string | 是 | 图片地址 |
| intro | React.ReactNode | 否 | 图片介绍 |
| children | React.ReactElement | 否 |
注意：若 PhotoConsumer 的 children 为自定义组件
React.HTMLAttributes
React.forwardRef 暴露内部 React.ReactHTMLElement 节点的 Ref
继承自 PhotoProvider。手动控制 react-photo-view 的展现与隐藏
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| images | dataType[] | 是 | 图片列表 |
| index | number | 否 | 图片当前索引 |
| visible | boolean | 是 | 可见 |
| onClose | (evt) => void | 是 | 关闭事件 |
| onIndexChange | Function | 否 | 索引改变回调 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。