如何用react-native-image-viewer组件实现手机上的长尾词大图预览功能？

本文共计928个文字，预计阅读时间需要4分钟。

目录 + React Native Image Viewer 大图预览 + 先看一个实现的例子 + 下面是一个简单的实例代码 + Props + React Native Image Viewer 大图预览 + 在移动开发中，特别涉及图片的应用开发中，经常会遇到需要预览大图的情况

目录

• react-native-image-viewer大图预览
• 先看一个实现的效果
• 实例
• 下面是一个简单的实例代码
• Props

react-native-image-viewer大图预览

在移动开发中，特别是涉及到图片的应用开发中，经常会遇到图片预览等功能，并且预览支持图片的放大和缩小，在Android原生开发中可以使用PhotoViewPager库实现，如果在React Native中，可以选择使用react-native-image-viewer。

先看一个实现的效果

实例

使用前需要先安装react-native-image-viewer库，安装命令如下：

npm i react-native-image-zoom-viewer --save

然后引入ImageViewer组件，然后设置图片的数据源即可，imageUrls接受一个图片数组。

下面是一个简单的实例代码

import React, {PureComponent, Component} from 'react' import {View, Modal,Navigator} from 'react-native'; import ImageViewer from 'react-native-image-zoom-viewer'; const images = [{ url: "avatars2.gitdubusercontent.com/u/7970947?v=3&s=460", // url: // "timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527660246058&di=6f0f1b19cf05a64317cbc5d2b3713d64&imgtype=0&src=avatars2.gitdubusercontent.com/u/7970947?v=3&s=460"} ]; export default class ImageZoom extends PureComponent { state = { index: 0, modalVisible: true }; render() { return ( <View style={{ padding: 10 }} > <Modal visible={tdis.state.modalVisible} transparent={true} onRequestClose={() => tdis.setState({modalVisible: false})}> <ImageViewer imageUrls={images} index={tdis.state.index}/> </Modal> </View> ) } }

Props

react-native-image-viewer库提供了诸多的属性，常见的属性如下。

属性名type描述默认值imageUrls(必填)array图片数据源enableImageZoomboolean是否可以进行缩放操作trueonShowModal(content?: JSX.Element) => void弹出大图回调() => {}onCancel() => void取消图片回调() => {}fliptdresholdnumber滑动到下一页的X值80maxOverflownumber滑动到下一页的X位置最大值300indexnumber初始显示第几张图片0failImageSource{uri: string}加载失败显示图片”loadingRender() => React.ReactElement渲染loading() => nullonSaveToCamera(index?: number => void保存到相机的回调() => {}onChange(index?: number => void图片切换时触发() => {}saveToLocalByLongPressboolean是否开启长按保存图片到本地trueonClick(onCancel?: function) => void单击事件(onCancel) => {onCancel()}onDoubleClick(onCancel?: function) => void双击事件(onCancel) => {onCancel()}onSave(url: string) => void保存图片到本地，(onCancel) => {onCancel()}renderFooter() => React.ReactElement自定义头部() => nullrenderFooter() => React.ReactElement自定义尾部视图() => nullrenderIndicator(currentIndex?: number, allSize?) => React.ReactElement: number自定义计时器(currentIndex, allSize) => currentIndex + “/” + allSizerenderImage(props: any) => React.ReactElement自定义Image组件(props) =>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。