分享一个最近写的 React 图片预览组件

[liumingyi1]

特性

1. 支持左右切换导航、上 /下滑关闭、双击放大 /缩小、双指放大 /缩小 /平移、键盘导航 /关闭、点击切换控件等
2. 打开 /关闭缩放动画
3. 自适应图像适应
4. 支持桌面端（兼容 IE10+）/移动端
5. 支持服务端渲染
6. 基于 Typescript

最重要的还是 Demo: http://minjieliu.gitee.io/react-photo-view/ gitee 国内快

手机端和桌面端都可以体验，不过桌面端感觉不太违和，后期会加上一些导航控件。

虽然没有写测试，但用在生产环境有一段时间了，有时间后期可以补上。

其实在写这个组件的时候已经对比过好几个插件，很多都是原生 js 写的，用在 React 中感觉不太友好，其他 React 的图片预览细节又不太完善，于是肝了许久，搞出一个😂。其主要难点就是在图片位置触摸控制上，要想体验好，细节就要多。

滑动减速目前使用 css 动画过渡，还可以再优化下，用物理阻尼运动公式实现体验更自然。

Github

https://github.com/MinJieLiu/react-photo-view 喜欢就帮忙点个 Star! 谢谢😊

[newbieRenew]

挺好的，就是滑动关闭时背景会闪一下。好像是因为拖动到边缘会将背景色调成透明 0->1，关闭时又会从 1->0。

[newbieRenew]

1->0，关闭时又会从 1->0。

[ewqazxc]

这个缩小是指放大后再缩小？

[mayne95]

之前有这个需求，找了一圈发现没几个好用的轮子。试了一下楼主这个，体验还不错，爱了爱了👍

[sunwang]

小小的组件东西真不少，细节处理的很好，赞！

[liumingyi1]

1 -> 0 这个记下了，后面会修复

[greatghoul]

做的相当好，最近刚好有需求，收了。

[hua123s]

小小的东西 细节真多，这源码看的头疼 2333

[hua123s]

this.onMove = throttle(this.onMove, 8); 请问为什么这里设置是 8 ？其中有什么原因？

[liumingyi1]

@hua123s 图个吉利，因为不能超 16