阅读 256

react-native 图片预览库使用 |牛气冲天新年征文

大年初七,开工大吉!

日常项目中,经常遇到图片需要预览放大查看的,涉及到图片手指放大缩小,多张图片切换预览的情况,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来配置图片源,最基本的使用方法。因为Modalvisible={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,开工大吉,也希望所有的码农小伙伴,继续加油,牛年牛逼!!!