大年初七，开工大吉！

日常项目中，经常遇到图片需要预览放大查看的，涉及到图片手指放大缩小，多张图片切换预览的情况，react-native 里推荐使用三方库react-native-image-viewer。

安装 yarn add react-native-image-zoom-viewer，目前版本是3.0.1的。

用到的组件是ImageViewer，使用起来非常方便，一般我们的项目都是点击图片，然后弹窗预览图片，所以需要使用modal弹窗包住，rn自带的modal即可满足。

<Modal
    transparent={true}
    visible={this.state.showModal}>
    <ImageViewer 
        ... //其他的属性 />
</Modal>
复制代码

通过点击事件来控制showModal变量，从而使modal显示隐藏即可。

一般我们的图片预览会是一组轮播图的预览，所以是多张图片的数组。通过imageUrls来配置图片源，最基本的使用方法。因为Modal的visible={true}，所以直接就是显示的预览图，为了演示方便使用，实际项目中还是会根据变量来控制显示隐藏。

const urls = [
    {url:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b184ed1120694b82b726d2a735076f11~tplv-k3u1fbpfcp-watermark.image'},
    {url:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b184ed1120694b82b726d2a735076f11~tplv-k3u1fbpfcp-watermark.image'}
]
return <Modal transparent={true}
              visible={true}>
    <ImageViewer
        imageUrls={urls}/>
</Modal>
复制代码

这时候已经自带了切换预览的功能了。

默认的话是从第一张开始的，可以通过配置属性index来控制最开始显示第几张图，往往一组轮播图多张图片，我们点击的中间第3张开始，index来显示当前点击的图片。

enableImageZoom，是否允许缩放图片，默认支持缩放功能。

图片预览出来，然后需要点击图片，收回预览，提供了onClick的单击回调，监听点击事件来关闭弹窗。

<ImageViewer
    imageUrls={urls}
    onClick={() => {
        this.setState({
            showModal: false
        })
    }}
    />
复制代码

默认还支持长按呼出保存图片的弹窗菜单功能，不过是英文提示字，通过属性menuContext={{"saveToLocal": "保存图片", "cancel": "取消"}}，来自定义文字。默认的只是提供一个弹窗点击回调的功能，实际的保存图片的功能还是要自己去写代码，onSave 图片保存到本地的回调方法需要自行完善，涉及到存储权限等的。

当然，也可以自行定义长按的呼出弹窗，通过menus来自定义弹窗完成图片保存功能。

以上是最基本也是日常项目中经常使用到的功能，GitHub地址奉上 react-native-image-viewer，里面还有很多属性配置可供参考，以及各种回调事件，这里没有一一列举，文档里都可以参考使用的。

最后，2021，开工大吉，也希望所有的码农小伙伴，继续加油，牛年牛逼！！！